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

Member Avatar for LastMitch

@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):

http://www.kevinandamanda.com/whatsnew/javascript-tutorial-mouseover-an-image-thumbnail-to-get-a-pop-up-preview

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.

Member Avatar for LastMitch

@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.

commented: Nice example! I'm learning something new. Thanks! +9

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.

viewer

<!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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.