0

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

3
Contributors
2
Replies
3
Views
8 Years
Discussion Span
Last Post by almostbob
0
<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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.