Creating Rollovers

The idea behind rollovers is simple. You have two images. The first, or original image, is loaded and displayed along with the rest of the Web page by the user. When the user moves the mouse over the first image, the browser quickly swaps out the first image for the second, or replacement image, giving the illusion of movement or animation.

Script 4.1 gives you the bare-bones rollover; the whole thing is done within a standard image link. First a blue arrow is loaded (Figure 4.1), and then it is overwritten by a red arrow when the user moves the mouse over the image (Figure 4.2). The blue arrow is redrawn when the user moves the mouse away.

Script 4.1. Here's the simplest way to do a rollover, within a link tag.

[View full width]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A Simple Rollover</title> </head> <body bgcolor="#FFFFFF"> <a href="next.html" onmouseover= "document.arrow.src='images/ arrow_on.gif'" onmouseout= "document.arrow.src='images/ arrow_off.gif'"><img src="images/ arrow_off.gif" width="147" height="82" border="0" name="arrow" alt="arrow" /></a> </body> </html>

Figure 4.1. The first image, before the user moves the mouse over it.

[View full size image]

Figure 4.2. When the mouse is over the image, the script replaces the first image with the second image.

[View full size image]

To create a rollover:

1.	<a href="next.html" The link begins by specifying where the browser will go when the user clicks the image, in this case to the page `next.html`.
2.	onmouseover="document.arrow.src= 'images/arrow_on.gif'" When the user moves the mouse over the image, the replacement image `arrow_on.gif`, which is inside the `images` directory, is written to the document window.
3.	onmouseout="document.arrow.src= 'images/arrow_off.gif'"> Then, when the mouse moves away, the image `arrow_off.gif` is swapped back in.
4.	<img src="images/arrow_off.gif" width="147" height="82" border="0" name="arrow" alt="arrow" /> The image link defines the source of the original image for the page. We have included the `alt` attribute inside the image tag because `alt` attributes (which give non-graphical browsers a name or description of an image) are required if you want your HTML to be compliant with the HTML standard, and because using `alt` attributes helps make your code accessible to disabled users, such as visually impaired users who browse using screen readers.

Disadvantages to This Kind of Rollover

This method of doing rollovers is very simple, but you should be aware that there are several problems and drawbacks with it.

Because the second image is downloaded from the server at the time the user rolls over the first image, there can be a perceptible delay before the second image replaces the first one, especially for people browsing your site with a modem, rather than broadband.
Using this method causes an error message in ancient browsers, such as Netscape 2.0 or earlier, Internet Explorer 3.0 or earlier, or the America Online 2.7 browser. Since there are so few of these vintage browsers still in use, it's not much of a problem these days.

Instead of using this method, we suggest that you use the following way to create rollovers, in the "Creating More Effective Rollovers" section, which solves all these problems and more.