How to Create Rollovers with JavaScript

excerpted from JavaScript for the World Wide Web: Visual QuickStart Guide, 3rd Edition, by Tom Negrino and Dori Smith

Disadvantages to this kind of rollover

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

  • Using this method will cause an error message in older browsers, such as Netscape 2.0 or earlier, Internet Explorer 3.0 or earlier, or the America Online 2.7 browser.

  • 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.

Rather than use this rollover method, we suggest that you use the following way to create rollovers, which solves both problems.

Common rollover mistakes

After we wrote the Second Edition 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 they 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.