• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Image Basics > Creating Rollovers

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), 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.

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

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

Common Rollover Mistakes

After we wrote previous editions of this book, we got lots of reader mail, and a lot of it was from people tearing their hair out because their rollovers didn't work. They said that 1they copied our code, checked it again and again, and it just wouldn't work! When we looked at their code we found that the number one mistake they had made was failing to put the name attribute in the img tag. People got so focused on the script part of the page that they missed making sure that the name attribute was within the HTML. And if you don't give the image a name, then JavaScript can't find the image.

Another common error is putting the onmouseover or onmouseout event handlers in the img tag. They must always be in the <a> tag, which is the anchor tag that creates a hyperlink.

To create a rollover

<a href="next.html"

The link begins by specifying where the browser will go when the user clicks on the image, in this case to the page next.html.

→ 'images/redArrow.gif'"

When the user moves the mouse over the image, the replacement image redArrow.gif, which is inside the images directory, is written to the document window.

→ 'images/blueArrow.gif'">

Then, when the mouse moves away, the image blueArrow.gif is swapped back in.

Disadvantages to This Kind of Rollover

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

  • Using this method will cause 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.

  • More importantly, 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.

Instead of using this rollover method, we suggest that you use the following way to create rollovers, in the “Creating More Effective Rollovers” section, which solves both problems.

<img src="images/blueArrow.gif"
→ width="147" height="82" border="0"
→ name="arrow" alt="arrow" />

The remainder of the image link defines the source of the original image for the page, and closes the anchor tag. 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 will help make your code accessible to disabled users, such as visually impaired users who browse using screen readers.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint