Javascript Image Rollovers

An image rollover is basically 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 create your own.

Image Rollover Examples:

<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 rollover there is. onMouseOver=”document.image1.src=’onImage.gif'” replaces “outImage.gif” with “onImage.gif”. onMouseOut=”document.image1.src=’outImage.gif'” swapps “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, such as Netscape 2.0, Internet Explorer 3.0 and earlier and America Online 2.7 browser. 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, we suggest you take a look on the next script and use this one.

Image Rollover Example:

<html>
<head>
<title>JavaScript Image Rollovers</title>
<script>
<!-- Hide 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;
	}
//End Hide Script-->
</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″) in order to be able a apply an 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 kind of resets the situation, when you move your mouse away from the image.

Did you like this post? Get monthly summary of our new tutorials, posts and tips to your inbox!

  • Bill Saffer

    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

  • David

    Work, but in F/F and Opera, text surrounding enlarged photo sits on top of the enlarged photo.

  • will

    Can the mouse over an image but substituted for text ie. roll over text on page shows image?
    Thanks

  • http://yellowstonemanagement.com Greg

    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.

  • http://app-lesson.blogspot.com/ amau

    it’s eazy with css. try :hover class.

  • Neil

    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?

  • http://www.clover-rollover.com/ clover rollover

    ” it’s eazy with css. try :hover class.” thanks amau!

  • Miriam Freer

    I tried the second script and the smaller image comes up but when you hover over it the larger image does not appear.
    HELP


Developer Resources