CODEWITHSUNDEEP
javascripthtml
user1108948
user1108948

Reputation:

Switch images by clicking one

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.

How to changed the code?

Upvotes: 0

Views: 98

Answers (1)

Robert Slaney
Robert Slaney

Reputation: 3722

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;">

Upvotes: 1

Related Questions