An image rollover is two different images.
One is displayed after the page loaded up, the other one is displayed only when the user moves his mouse over the first one.
Image rollovers are often used for a site’s interface. Currently, this is the most popular JavaScript function.
The following script listening shows you how to create your own.
Image Rollover Example:
<html>
<head>
<title>JavaScript Image Rollovers</title>
</head>
<body>
<a href="link.html"
onMouseOver="document.image1.src='onImage.gif'"
onMouseOut="document.image1.src='outImage.gif'">
<img src="outImage.gif" name="image1">
</a>
</body>
</html>This is the easiest type of image rollover.
onMouseOver="document.image1.src='onImage.gif'" – replaces outImage.gif with onImage.gif.
onMouseOut="document.image1.src='outImage.gif'" – swaps outImage.gif back when the user moves his mouse away from it.
The image tag defines the source of the original image and contains the very important “name” option (name=”image1″).
The disadvantages of this kind of rollover are, that although it is simple, it produces an error message in older browsers.
Also, because the second image is downloaded from the server at the same time, there can be a delay when the user rolls over the first image before it’s replaced with the second.
Rather than using the first method, I suggest you use a bit of JavaScript script to produce image rollovers.
Image Rollover Example:
<html>
<head>
<title>JavaScript Image Rollovers</title>
<script>
function move_in(img_name,img_src) {
document[img_name].src=img_src;
}
function move_out(img_name,img_src) {
document[img_name].src=img_src;
}
</script>
</head>
<body>
<a href="link.html"
OnMouseOver="move_in('image1','image_on.gif')"
OnMouseOut="move_out('image1','image_out.gif')">
<img src="image_out.gif"
alt="Move your mouse over here!" name="image1">
</a>
</body>
</html>We define two functions, move_in and move_out.
Inside those, we set the parameters img_name (image name) and img_src (image source) to be able later to identify the image and its rollover.
Next, we have to give our image a name (name=”image1″) to be able a apply a rollover to it.
To complete the rollover we use onMouseOver, to call the function “move_in”, which includes the source for the rollover image.
And onMouseOut, to call the function move_out, which includes the information for the initial image and resets the situation, when you move your mouse away from the image.
8 Responses
I need the html code for mouse over code to roll over thumbnail images to enlarge to larger image on the same page. I need to display 5 thumbnail images in a horizational position and be able to roll over the image to enlarge. Looking through your website I didn’t find anything like this. Can you help?
Thanks,
Bill Saffer
Work, but in F/F and Opera, text surrounding enlarged photo sits on top of the enlarged photo.
Can the mouse over an image but substituted for text ie. roll over text on page shows image?
Thanks
Can I and how do I keep the rollover image the same width of the screen? Heighth is okay as rolling ball allows scrolling down the enlarged picture to the next picture.
it’s eazy with css. try :hover class.
Hey, I was wondering about an image rollover like the one currently found on corbis.com when you search for an item, where the picture shows up larger but inside the same screen and in its own little sort of lightbox type thing.
Does anyone know of any resources for this?
” it’s eazy with css. try :hover class.” thanks amau!
I tried the second script and the smaller image comes up but when you hover over it the larger image does not appear.
HELP