I have observed on ebay that only 1 large image of a product is displayed and around it a few more thumbnails are displayed. When you click (sometimes hovering does it) one of the thumbnails, the large image is replaced by a large copy of the thumbnail. Effectively you are able to view the object with different perspectives.

How is such a feat achieved? Can you please provide me with examples?



<img id='largeimg' src='largeimg0.jpg' style='float:right'>
<img src='smallimage1.jpg' onclick='document.getelementbyid('largeimg').src="largeimg1.jpg";'><br>
<img src='smallimage2.jpg' onclick='document.getelementbyid('largeimg').src="largeimg2.jpg";'><br>
<img src='smallimage3.jpg' onclick='document.getelementbyid('largeimg').src="largeimg3.jpg";'><br>
<img src='smallimage4.jpg' onclick='document.getelementbyid('largeimg').src="largeimg4.jpg";'>

witdh height statements omitted for brevity
together with an image preload script between the </body></html>(after page load) tags to make the large images appear to be instant

<script language="javascript" type="text/javascript">
largeimage1 = new Image();
largeimage1.src = "http://pics.mysite.com/largeimage1.jpg";
largeimage2 = new Image();
largeimage2.src = "http://pics.mysite.com/largeimage2.jpg";
largeimage3 = new Image();
largeimage3.src = "http://pics.mysite.com/largeimage3.jpg";
largeimage4 = new Image();
largeimage4.src = "http://pics.mysite.com/largeimage4.jpg";