Question

I have a lot thumbnail images, when I click one, the original bigger image will be displayed. It will replace the default image “manifier.jpg” in the position of elementId “main”.
My code:

<img src="magnifier.jpg" name="main" id="main">
<br>
<br> 

 <a href="IMG_0554.JPG" onclick="swap(this); return false;"><img src="tn_IMG_0554.JPG"></a> 
 <a href="IMG_0566.JPG" onclick="swap(this); return false;"><img src="tn_IMG_0566.JPG"></a> 
 <a href="IMG_0570.JPG" onclick="swap(this); return false;"><img src="tn_IMG_0570.JPG"></a>

And

<script type="text/javascript"> 
     function swap(image) { 
         document.getElementById("main").src = image.href; 
     } 
 </script> 

It works perfectly. My question, if I followed the steps.

• 1) Clicking thumbnail image.
• 2) Bigger image is shown.

• 3) Clicking the bigger image.

  I want the default image will be displayed.

How to changed the code?

Answer 1

Just add an onclick event for the main img and reset it back to magnifier.jpg

<img id="main" name="main" onclick="this.src='magnifier.jpg'; return false;">