How to provide thumbnails around an image?

[sgsawant]

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?

Regards,

-sgsawant

[serkan sendur]

it is done with javascript, you can search google with javascript image gallery or slide shows.
you can copy and paste javascript code from the following website :
http://www.dynamicdrive.com/dynamicindex4/indexb.html

[almostbob]

<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

</body>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!-- 
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";
//-->
//]]>
</script></html>