Inside Technique : Rollovers 101 : 2nd Generation Rollovers

Netscape Navigator 3.0 added the ability to use javascript to change an image source. With this came the 2nd generation of rollover effects that are supported by Netscape 3.0 and later and Internet Explorer 4.0 and later (IE 3.0 does not support image rollovers). With these effects, when the mouse moved over an image, a different image is displayed in its place, or when over an anchor an image was displayed. For example, move your mouse over the following image:

To add cross-browser rollover effects to images, you have to wrap them in an <A>nchor element. This is because Netscape Navigator only supports the onmouseover and onmouseout events on the anchor element (Internet Explorer 4.0 supports them on all elements). Below is the HTML that we used to create the image rollover demo:

<A ONCLICK="return false" 
  ONMOUSEOVER="document.images.imageDemo.src='/gifs/redball.gif'" 
  ONMOUSEOUT="document.images.imageDemo.src='/gifs/ball.gif'" HREF="#">
	<IMG border=0 NAME=imageDemo SRC="/gifs/ball.gif">
</A>

Notice that the image has a name. This name should be unique to your entire document as is used to access the element from script. In the anchors onmouseover and onmouseout event, we access the image, imageDemo, through the images collection. All images in your page are exposed through this collection.

You can use the image rollover effect to make links more interactive. For example, we display a small arrow as you move the mouse over each anchor below:

Page 1

Page 2

Page 3

<DL>
<DD>
  <IMG NAME="m1" SRC="/gifs/s.gif" WIDTH=5 HEIGHT=9>
  <A HREF="#" ONMOUSEOVER="document.images.m1.src='/gifs/garrow.gif'" 
                 ONMOUSEOUT="document.images.m1.src='/gifs/s.gif'">
    Page 1
  </A>
<DD>
  <IMG NAME="m2" SRC="/gifs/s.gif" WIDTH=5 HEIGHT=9>
  <A HREF="#" ONMOUSEOVER="document.images.m2.src='/gifs/garrow.gif'" 
                 ONMOUSEOUT="document.images.m2.src='/gifs/s.gif'">
    Page 2
  </A>
<DD>
  <IMG NAME="m3" SRC="/gifs/s.gif" WIDTH=5 HEIGHT=9>
  <A HREF="#" ONMOUSEOVER="document.images.m3.src='/gifs/garrow.gif'" 
                 ONMOUSEOUT="document.images.m3.src='/gifs/s.gif'">
    Page 3
  </A>
</DL>

This works essentially the same as our first image rollover. However, in this example, the initial image, s.gif, is a single pixel transparent gif. We need to reserve the space for the arrow with this gif by setting the initial width and height to the size of the green arrow. The width and height must be specified for Netscape Navigator as Netscape cannot reflow their page for different image sizes. If you omit the size, Netscape scales all images to the size of the first displayed image, while Internet Explorer 4.0 automatically resizes the image and reflows the surrounding content.

The third generation rollover effect in the 4.0 browsers allows greater content manipulation and in Internet Explorer 4.0's case, completely dynamic content and style manipulation. While these rollovers are more powerful, they also require you to understand the different in object model implementations. The prior generation rollover effects scripts essentially offered a reasonable degree of cross-browser compatibility.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.