Image load on mouseover of another image

Dezynincodr · #1 (**permalink**) 12-13-2007, 05:46 PM

I have something like a gallery where I would like to show thumnails of a few images and I want it to work so that when a user mouseovers the the thumbnail (thumbnails are positioned below a large image displaying area) the larger version of the image appears. I assume that this is done with JavaScript. Does anyone know the code for this?

BigAlReturns · #2 (**permalink**) 12-13-2007, 06:13 PM

Yep, you can achieve this with javascript, here's an (untested) basic script that's how I would go about it.

Code:

<head>
<script type="text/javascript">
function imageSwap (image) {
document.getElementById('bigimage').innerHTML='<img src="' + image + '.jpg" />';
}
</script>
</head>
<body>
<a href="#" onMouseOver="imageSwap('image1')"><img src="thumb1.jpg" /></a>
<a href="#" onMouseOver="imageSwap('image2')"><img src="thumb2.jpg" /></a>
<div id="bigimage">
<img src="image1.jpg" />
</div>
</body>

This would be with images named "image1.jpg" for the big version, and "thumb1.jpg" for the thumbnails.
I'm sure I've seen this achieved with pure CSS somewhere as well, I couldn't do it myself, but if I can find the link I'll post it.

BigAlReturns · #3 (**permalink**) 12-13-2007, 06:25 PM

OK here's a working online demo for you, using more or less that code. I changed it so the thumbnails and big image are the same image, just resized using attributes in the img tag - that way the big images are already loaded when you mouseover, so there's no waiting if the images are big.
You could easily add in a default image for rollouts, just by having onMouseOut="imageSwap('default');"
Another point, if the images are down the page, then you may find that on activation of the js, it flicks back up to the top. To stop this add "return false;" like below:

onMouseOver="imageswap('image1');return false;"

BigAlReturns · #4 (**permalink**) 12-13-2007, 09:29 PM

I couldn't find that link for you, but with a tiny amount of messing around I made this all css effort for you.

And props to Ryan (I stole the CSS technique from your example page you made for someone earlier!)

ryanhellyer · #5 (**permalink**) 12-13-2007, 10:38 PM

The CSS method is definitely better.

You can prune the code down a little too by using backgroudn images instead of IMG tags. Although some times IMG tags are a more semantical option - depends on the situation.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
sql: search multiple keywords for one image	md_doc	Database Development	1	01-09-2008 11:08 AM
how do i put an image using asp.net with VB	hk33	Server-Side Scripting	0	01-03-2008 07:47 AM
database image problem	robertdh	Server-Side Scripting	0	10-08-2006 05:08 AM