␡
- How to Create Rollovers with JavaScript
- To create a rollover
- Disadvantages to this kind of rollover
- Creating More Effective Rollovers
- To create a better rollover
- A slick way to deal with the browser version problem
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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 method of creating rollovers found on the next page, 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.