Cacher is the code snippet organizer for pro developers

Main Image:
<img id="mainImage" name="change" src="productPhotos/big/xr18-1.jpg" style="max-width: 400px; max-height: 400px;" alt="" >
<br/>
Thumbnails:
<br/>
<img src="productPhotos/thumbs/xr18-1.jpg" style="max-width: 150px; max-height: 100px;" alt="" onclick="changeImage('xr18-1.jpg')">
<img src="productPhotos/thumbs/xr18-2.jpg" style="max-width: 150px; max-height: 100px;" alt="" onclick="changeImage('xr18-2.jpg')">
<img src="productPhotos/thumbs/xr18-3.jpg" style="max-width: 150px; max-height: 100px;" alt="" onclick="changeImage('xr18-3.jpg')">

<script type="text/javascript">
  function changeImage(image) {
      document.getElementById("mainImage").src="productPhotos/big/"+image;
      //document.getElementById("img").src="productPhotos/big/"+document.getElementById(image).src
}
</script>