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:

Here's the exact code for this effect:

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
  var logot = new Image();
  logot.src = "logot.gif";
  var logob = new Image();
  logob.src = "logob.gif";
  var logotn = new Image();
  logotn.src = "logotn.gif";
  var logobn = new Image();
  logobn.src = "logobn.gif";
  var logota = new Image();
  logota.src = "logota.gif";
  var logoba = new Image();
  logoba.src = "logoba.gif";
}
var isMapAct = false;
function actLogo(c1, c2) {
  isMapAct = true;
  if (document.images) {
    act("logo" + c1);
    inact("logo" + c2);
  } 
}
function inactLogo() {
  isMapAct = false;
  if (document.images) {
    var str = 'if (!isMapAct) {' + 
              'document.logot.src = logot.src;' +
              'document.logob.src = logob.src; }';
    timerID = setTimeout(str, 1);
  }
}
function act(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + 'a.src');
}
function inact(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + 'n.src');
}
// -->
</SCRIPT>
<A HREF="toc.html"
   onMouseOver="actLogo('t', 'b')" onMouseOut="inactLogo()">
<IMG SRC="logot.gif" HEIGHT="30" WIDTH="100"
     BORDER="0" NAME="logot" ALT="Netscent Logo (top)"></A><BR>
<A HREF="map.html"
   onMouseOver="actLogo('b', 't')" onMouseOut="inactLogo()">
<IMG SRC="logob.gif" HEIGHT="30" WIDTH="100"
     BORDER="0" NAME="logob" ALT="Netscent Logo (bottom)"></A>

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

Created: August 21, 1997
Revised: March 30, 1998

URL: https://www.webreference.com/js/column1/nested.html