单击缩略图时，javascript画廊不显示主图像

Question

I'm wanting to create a gallery which displays a main image when the thumbnails are clicked. When clicked the thumbnails rather than altering the image in the webpage take the user to the file where the image is kept and display it in the top right corner.

No idea why this is happening ? Any suggestions where I'm going wrong and how to fix this ?

<img id="veiwer" src="images/motorbike-girl.jpg" />
<div id='thumbs'>
   <a href='images/chicks.jpg' onclick="gallery(this);"><img src='images/chicks-
   thumb.jpg'/></a>
   <a href='images/motorbike-girl.jpg' onclick="gallery(this);"><img 
   src='images/motorbike-girl-thumb.jpg'/></a>                                                
   <a href='images/yamaha-thumb.jpg' onclick="gallery(this);"><img              
   src='images/yamaha.jpg'/></a>    
</div>


         function gallery(change) {

          document.getElementById('viewer').src = change.href;
         }

Answer 1

The problem occurs because of the default behavior of the anchor tag : by default, when you click a link, you get to the page/document it's pointing to. So, in your javascript you would need to tell "Don't run the default behavior, only what I want to do". It's done through the preventDefault() method of the event.

cfr this fiddle for a working example, where I removed also the inline javascript (= onclick attribute).