[FIXED] how to change image onclick for few seconds using javascript

Issue

i have a an image section where onclick i want to change it for few seconds and make it back to original image after few seconds, i did the following code:

<img src="contacticons.jpg" usemap="#image-map" id="imgName">
<a onclick="document.getElementById('imgName').src='../newImgSrc.jpg';"></a>

can anyone please tell me how to change it for few seconds and take it back to original image, thanks in advance

Solution

function ChangeImage()
{
  var originalImage = $("#imgName").attr("src");
  var changeImage = $("#imgName").data("changeimage");
  $("#imgName").attr("src",changeImage);  
  setTimeout(function(){
  $("#imgName").attr("src",originalImage);
  }, 1000);

  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/photo-1498598457418-36ef20772bb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" usemap="#image-map"  id="imgName" height="50"
data-changeimage="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">

<a onclick="ChangeImage()">change</a>

Answered By - kgajjar20

Answer Checked By - Senaida (PHPFixing Volunteer)