JavaScript Rollovers: Creating Multiple Rollovers

Creating Multiple Rollovers

Microsoft Shows Off Silverlight 4, IE9 Plans

Metasploit Expands Vulnerability Test Framework

Netscent Corporation used to feature a rollover menu on their home page. Their toolbar was fixed on the left-hand side of the page, on top of the background's blue strip. The toolbar consisted of several buttons, such as "Home," "Advantages," and "Packages." When the user moved the mouse over one of the buttons, that button would slide a few pixels to the right, and its text would become orange. Let's take a look at the menu's backbone:

The menu looks great, but what if, for example, the user is currently browsing the "Packages" page. In that case, the "Packages" image should be active by default, and should become inactive only when the user is pointing at a different button. Notice that we need to inactivate one image and activate another one at the same time -- a multiple rollover. Take a look at the following script segment:

if (document.images) {
  var defImg = "pack";

  var homeoff = new Image();
  homeoff.src = "homeoff.gif";
  var homeon = new Image();
  homeon.src = "homeon.gif";
  var advanoff = new Image();
  advanoff.src = "advanoff.gif";
  var advanon = new Image();
  advanon.src = "advanon.gif";
  var packoff = new Image();
  packoff.src = "packoff.gif";
  var packon = new Image();
  packon.src = "packon.gif";
  var hebrewoff = new Image();
  hebrewoff.src = "hebrewoff.gif";
  var hebrewon = new Image();
  hebrewon.src = "hebrewon.gif";
  var contactoff = new Image();
  contactoff.src = "contactoff.gif";
  var contacton = new Image();
  contacton.src = "contacton.gif";
}

function actMenuItem(imgName) {
  act(imgName);
  inact(defImg);
}

function inactMenuItem(imgName) {
  inact(imgName);
  act(defImg);
}

function act(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + "on.src");
}

function inact(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + "off.src");
}

The actMenuItem() function accepts a string specifying the name of the selected image. It calls act() to activate that image, and then invokes inact() to inactivate the page's default image, which is assigned to a global variable named defImg at the beginning of the script. On the "Packages" page it should be "pack", as shown in the example.

The inactMenuItem() function inactivates the active image, and activates the page's default image. The inactMenuItem() function basically reverses the operation of actMenuItem(). Take a look at the entire code:

<SCRIPT LANGUAGE="JavaScript">
<!--

if (document.images) {
  var defImg = "pack";

  var homeoff = new Image();
  homeoff.src = "homeoff.gif";
  var homeon = new Image();
  homeon.src = "homeon.gif";
  var advanoff = new Image();
  advanoff.src = "advanoff.gif";
  var advanon = new Image();
  advanon.src = "advanon.gif";
  var packoff = new Image();
  packoff.src = "packoff.gif";
  var packon = new Image();
  packon.src = "packon.gif";
  var hebrewoff = new Image();
  hebrewoff.src = "hebrewoff.gif";
  var hebrewon = new Image();
  hebrewon.src = "hebrewon.gif";
  var contactoff = new Image();
  contactoff.src = "contactoff.gif";
  var contacton = new Image();
  contacton.src = "contacton.gif";
}

function actMenuItem(imgName) {
  act(imgName);
  inact(defImg);
}

function inactMenuItem(imgName) {
  inact(imgName);
  act(defImg);
}

function act(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + "on.src");
}

function inact(imgName) {
  if (document.images)
    document.images[imgName].src = eval(imgName + "off.src");
}

// -->
</SCRIPT>
<IMG SRC="menut.gif" HEIGHT="26" WIDTH="100"><BR>
<A HREF="index.html"
   onMouseOver="actMenuItem('home')"
   onMouseOut="inactMenuItem('home')">
<IMG SRC="homeoff.gif"
     HEIGHT="26"
     WIDTH="100"
     NAME="home"
     ALT="Home"
     BORDER="0"></A><BR>
<A HREF="advantages.html"
   onMouseOver="actMenuItem('advan')"
   onMouseOut="inactMenuItem('advan')">
<IMG SRC="advanoff.gif"
     HEIGHT="26"
     WIDTH="100"
     NAME="advan"
     ALT="Advantages"
     BORDER="0"></A><BR>
<A HREF="packages.html">
<IMG SRC="packon.gif"
     HEIGHT="26"
     WIDTH="100"
     NAME="pack"
     ALT="Packages"
     BORDER="0"></A><BR>
<A HREF="hebrew.html"
   onMouseOver="actMenuItem('hebrew')"
   onMouseOut="inactMenuItem('hebrew')">
<IMG SRC="hebrewoff.gif"
     HEIGHT="26"
     WIDTH="100"
     NAME="hebrew"
     ALT="Hebrew"
     BORDER="0"></A><BR>
<A HREF="contact.html"
   onMouseOver="actMenuItem('contact')"
   onMouseOut="inactMenuItem('contact')">
<IMG SRC="contactoff.gif"
     HEIGHT="26"
     WIDTH="100"
     NAME="contact"
     ALT="Contact"
     BORDER="0"></A><BR>
<IMG SRC="menub.gif" HEIGHT="26" WIDTH="100">

Now here's the actual rollover: