In some web sites, ebay and Amazon specifically, they have several thumbnails below a larger image. When you hover over one of the thumbnails the corresponding larger image is displayed in the space above.
This effect would be perfect for a site that I am working on right now. Can anybody show me how they do this?
Many TIA!
Dennis
@Dennis73
In some web sites, ebay and Amazon specifically, they have several thumbnails below a larger image. When you hover over one of the thumbnails the corresponding larger image is displayed in the space above.
Have you google this topic?
Read and try this code (You can modify it):
or this:
http://www.jacklmoore.com/zoom
or this:
http://www.inwebson.com/jquery/jquery-image-hover-effects/
All of the links I provided you can modify the code to suited your needs.
Yes, I googled several times. That is how I got here!
Thank you, but none of those effects are the one I am looking for.
Look at this Amazon page and you will see exactly what I am looking for. The effect is to change an existing image in-place.
@Dennis73
Look at this Amazon page and you will see exactly what I am looking for. The effect is to change an existing image in-place.
You have to understand something you can't find the exact code from Amazon or ebay? The Amazon & ebay looks very simple. I think you can just created it by yourself. The links I provided you can modify the code to look exactly the same as Amazon & ebay. There's no possible way find the exact code!
OK. Thanks for the help. I guess I'll have to try some other trick or forget it.
You can use JavaScript for something basic. Here is some sample code you can take a look at and adapt to your needs...
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
img {border:1px solid #7f7f7f;}
.thumb {margin-right:4px;}
</style>
</head>
<body>
<img id="preview" src="images/red.jpg" width="200" height="300" /><br />
<img class="thumb" id="red" src="images/red.jpg" width="60" height="100" onmouseover="prev('red')"/>
<img class="thumb" id="blue" src="images/blue.jpg" width="60" height="100" onmouseover="prev('blue')"/>
<img class="thumb" id="yellow" src="images/yellow.jpg" width="60" height="100" onmouseover="prev('yellow')"/>
<script>
function prev(color){
document.getElementById('preview').src="images/"+color+".jpg";
}
</script>
</body>
</html>
See attached demo files.
Jorge;
Thank you! That is exactly what I was looking for!
Works like a charm!
Glad to hear!
I went ahead and cleaned up the example code I provided in this thread just a bit more. I uploaded a demo online with the source code just in case anyone else that comes across this thread is in need of a Simple JavaScript Thumbnail Viewer. No extra bells and whistles....
Feel free to use it and adapt it to your needs.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
img {border:1px solid #7f7f7f;}
.thumb {margin-right:4px;}
</style>
</head>
<body>
<img id="preview" src="images/red.jpg" width="200" height="300" /><br />
<img class="thumb" id="red" src="images/red.jpg" width="60" height="100" onmouseover="prev('red')"/>
<img class="thumb" id="blue" src="images/blue.jpg" width="60" height="100" onmouseover="prev('blue')"/>
<img class="thumb" id="yellow" src="images/yellow.jpg" width="60" height="100" onmouseover="prev('yellow')"/>
<script>
function prev(color){
document.getElementById('preview').src="images/"+color+".jpg";
}
</script>
</body>
</html>
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.