JavaScript Rollovers: Nested Rollovers - Doc JavaScript

Nested Rollovers

Now that you've got the basics of rollovers nailed down, let's add some more functionality. You can actually layer rollovers to create what we call nested rollovers. A nested rollover is an "image" that, when pointed at, splits into several images which are also rollovers. It sounds complicated, but it's really not too difficult. First, let's take a quick look at the following images:

logot.gif

logotn.gif

logota.gif

logob.gif

logobn.gif

logoba.gif

Combining these six images, we can create a very appealing nested rollover:

The actLogo() function accepts two string arguments. One argument should be 't' (standing for "top") and the other one should be 'b' (standing for "bottom"). This function makes the logo active (it becomes a two-item menu) by making the top (or bottom) active and the bottom (or top) inactive. The first argument specifies which image (top or bottom) becomes active, and the second one specifies which image (top or bottom) becomes inactive.

The inactLogo() function simply displays the original images (logot.gif and logob.gif). The isMapAct variable and the setTimeout() function are implemented to stop the logo from appearing when the user moves the pointer from the top to the bottom, or from the bottom to the top (see the section Maximum "Transition" Quality).