View Full Version : How do I get a larger pic to show up on mouseover of a thumbnail?

06-15-2012, 05:56 PM
So, I am making a table of images for an online catalogue. I have tried googling mouseovers and rollovers. But I can't seem to find the exact answer to my question.
Basically I want a larger box, probably medium size(640px) to show up with a larger picture when you mouseover the thumbnail in the table.
I thought maybe I should use a map tag with a mouseover attribute, but I'm not exactly sure how to code that. Or if that is even the best way to do this.
Any help is greatly appreciated.
Thank you

If it helps, this is the webpage with the skeleton of the table. http://krystlekleen.batcave.net/testpages/catalogue.html

06-15-2012, 06:14 PM
function ChangeImg(Img){

<img src="th_image1.png" onmouseover="ChangeImg('Image1.png');">
<img src="th_image2.png" onmouseover="ChangeImg('Image2.png');">
<img src="th_image3.png" onmouseover="ChangeImg('Image3.png');">

<img id="LargeImage" src="blank.gif">

--- I don't know if you are aware of it, but your host is recognized as Malicious. - According to Norton

06-15-2012, 06:47 PM

Thanks for your quick reply, let me show you my code now, and maybe you can tell me what i'm doing wrong?
Also is that code just html? or is it something like jscript that I need to declare in the heading?
Please excuse my nubbi-ness, I am still new to html and css. :o

<div id="foreground">
<ul><li><a href="http://krystlekleen.batcave.net/testpages/index.html">Home</a></li><li><a href="#contact">Contact Me</a></li></ul>
<img src="logo.png"></div>

<div id="scrlbx" style="width:800px;overflow:scroll; border:2px groove #6600CC" align:center;>
function ChangeImg(Img){
<tr><td><img src="http://farm8.staticflickr.com/7230/7343927372_24e65d87ed_m.jpg" width="240px" height="180px"
onmouseover="ChangeImg('http://farm8.staticflickr.com/7230/7343927372_24e65d87ed_z.jpg');"></td><td>Description and price here</td></tr>

06-15-2012, 07:01 PM
you need to place <img id="LargeImage" src="blank.gif">

This tag is the one that contains the large image.

Where you place it is up to you!

You can change blank.gif to what ever you want, as it is only a temporary, virtually invisible image.

06-15-2012, 07:14 PM
I see what you are saying, so than I am assuming that I need to make a seperate script tag for each picture I want to do this with and label them largeimg2 and so on. Am I right?

06-16-2012, 01:56 AM
You only need 1 script tag.
All the thumbnail tags use the same function, which makes #LargeImage change to the image defined in the passed value.

No matter how many thumbnails you have, you will still only need 1 script/function and 1 tag for all the large images.

In my example above: When you hover the first thumbnail, the function will be run with Image1.png as the passed value, hovering the second will pass Image2.png as the value, and so on.