JavaScript Rollovers: Introduction - Doc JavaScript

Universal JavaScript Rollovers

Since the official release of Netscape Navigator 3.0x, JavaScript rollovers have become extremely popular. They are currently in use on many large web sites, including IBM, Digital, and ZDNet.

Have you ever seen an image move, change color, or even pop up when you place the pointer over that image? If so, you were most likely experiencing a JavaScript rollover. Rollovers are an excellent way of adding dynamic elements to a web page without penalizing browsers that do not support the necessary features (if the rollover is programmed properly).

We're going to discuss various implementations of JavaScript rollovers in this column. The following set of images demonstrates a nested rollover:

In this article you'll learn:

1. How to use the document.images object.
2. How to make your rollovers backward compatible.
3. How to create an instance of the Image object.
4. How to combine several rollovers to create a menu.
5. How to create multiple rollovers.
6. How to ensure maximum "transition" quality.
7. How to create nested rollovers.