JavaScript Rollovers: Implementing Several Rollovers - Doc JavaScript

Implementing Several Rollovers

You may be impressed by how easy it is to create such a nice effect. Although rollovers are not difficult to create, this is just the beginning. Now consider a simple "menu" consisting of several rollovers. In this case, it's extremely important to use a standard naming scheme for the variables and image names. For example, advann could be the name of a variable, and advan would be the corresponding image name. We'll use a constant suffix for the inactive images in the menu, and another one for the active images. Take a look at the following JavaScript functions:

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");
}

The main difference between these functions and the ones in the previous script is that they accept an argument. The parameter, imgName, is used in two expressions:

document.images[imgName].src // the instance
imgName + "n.src" // the URL

Notice that the argument is a string, so it should be evaluated in both expressions. We use square brackets to evaluate the string in the first expression, and the built-in eval() function for the second one. By wisely choosing the variables and image names for our rollovers, we can use two general functions to activate and inactivate any image in the document. Our naming convention is demonstrated in the following code listing:

<SCRIPT LANGUAGE="JavaScript">
&lt!--
if (document.images) {
  var homen = new Image();
  homen.src = "homen.gif";
  var homea = new Image();
  homea.src = "homea.gif";
  var advann = new Image();
  advann.src = "advann.gif";
  var advana = new Image();
  advana.src = "advana.gif";
  var packn = new Image();
  packn.src = "packn.gif";
  var packa = new Image();
  packa.src = "packa.gif";
  var hebrewn = new Image();
  hebrewn.src = "hebrewn.gif";
  var hebrewa = new Image();
  hebrewa.src = "hebrewa.gif";
  var contactn = new Image();
  contactn.src = "contactn.gif";
  var contacta = new Image();
  contacta.src = "contacta.gif";
}
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="home.html" onMouseOver="act('home')"
   onMouseOut="inact('home')">
<IMG SRC="homen.gif" 
     HEIGHT="24" 
     WIDTH="120" 
     NAME="home" 
     BORDER="0"
     ALT="Home"></A><BR>
<A HREF="advantages.html" onMouseOver="act('advan')"
   onMouseOut="inact('advan')">
<IMG SRC="advann.gif" 
     HEIGHT="24" 
     WIDTH="120" 
     NAME="advan" 
     BORDER="0"
     ALT="Advantages"></A><BR>
<A HREF="packages.html" onMouseOver="act('pack')"
   onMouseOut="inact('pack')">
<IMG SRC="packn.gif" 
     HEIGHT="24" 
     WIDTH="120" 
     NAME="pack" 
     BORDER="0"
     ALT="Packages"></A><BR>
<A HREF="hebrew.html" onMouseOver="act('hebrew')"
   onMouseOut="inact('hebrew')">
<IMG SRC="hebrewn.gif" 
     HEIGHT="24" 
     WIDTH="120" 
     NAME="hebrew" 
     BORDER="0"
     ALT="Hebrew"></A><BR>
<A HREF="contact.html" onMouseOver="act('contact')"
   onMouseOut="inact('contact')">
<IMG SRC="contactn.gif" 
     HEIGHT="24" 
     WIDTH="120" 
     NAME="contact" 
     BORDER="0"
     ALT="Contact"></A>

Let's take a look at an example from this script. The first image is named home, so its onMouseOver event handler invokes act() with the same string -- "home". The same rule applies to the image's onMouseOut event handler. Notice that the corresponding JavaScript variables are named homen and homea, for the inactive and active image (respectively).

Here's the result of our script:

Once again, the links in the demonstration aren't real. They just reload this page.

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

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