using thumbnails to change main image using OnClick

Question

So I have a couple of thumbnails and a big image to left of them, when you click one of the thumbnails I want it to change the main image to which ever thumbnail is clicked, I was thinking of using something like:

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

Then on the main image:

<img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image"/>

and finally on the thumbnails:

<img src="<?php echo $image['thumb']; ?>" onclick="changeImage()" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />

Obviously I will need to add something into .src='' but I'm just not sure what, is there something that I can add in there instead of e.g 1.jpg which will select whichever image is clicked?

Answer 1

You can pass a reference to the image as a parameter.

function changeImage(x){
  document.getElementById('image').src = x.src;
}

You can continue to call the function using your first way:

<img src="<?php echo $image['thumb']; ?>" onclick="changeImage(this)" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />

Answer 2

TRY THIS DEMO

<script>
    function updateIMG(e) {
        document.getElementById("preview").src = e;
    }
</script>