0

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

4
Contributors
8
Replies
25
Views
4 Years
Discussion Span
Last Post by number
0

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

Edited by LastMitch: grammer

0

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

0

OK. Thanks for the help. I guess I'll have to try some other trick or forget it.

2

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.

Votes + Comments
Nice example! I'm learning something new. Thanks!
Attachments
0

Jorge;
Thank you! That is exactly what I was looking for!
Works like a charm!

0

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

0
<!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>
This question has already been answered. 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.