Rather than using long object references in the the images' surrounding <a> tags as in the previous example, we'll clean up the inline coding by using two simple functions. Because we can refer to images by their HTML names rather than element index, a clever naming convention used in the Image Object Constructor code as well as the rollover functions can greatly simplify and shorten the code needed to create a rollover effect.

In this example, all the images in the Image Object constructor use the same name we've assigned each of the values of the HTML <img> tag's name attribute, but are appended with "Off" or "On". Don't pay attention to the actual image names (homeOn.gif), they have no effect on the function's naming convention, they only help the page builder stay organized.

var homeOn = new Image()             
homeOn.src = "../images/homeOn.gif"
	
var homeOff = new Image()
homeOff.src = "../images/homeOff.gif"

<img src="../images/homeOff.gif" name="home">

Now for the first function, which is used with the onMouseOver event handler to display the on-state image. It takes an argument called "imgName" that is used first to identify the image whose src is about to be swapped. It is used a second time in an object reference to the image that is displayed when the mouse moves over the original image.

function showOn(imgName) { 
document.images[imgName].src = eval(imgName + "On.src")
}

When the function is invoked, the image's HTML name is passed as the argument:

<a href="#" onMouseOver="showOn('contact')"><img src="../images/contactOff.gif" name="contact"></a>

Imagine the function's single statement being interpreted exactly as it was coded inline in the previous example:

document.images["contact"].src = contactOn.src

Because each image in the object constructor code is assigned the same name as its corresponding HTML image name, but appended with "On" or "Off", this generic function can be used to create a rollover effect for each rollover image on the page simply by passing the function the HTML image name. So what is eval and why do we need it?

Eval Method
To simplify the answer, here's the golden rule: when a string is used in an object reference, the eval method MUST be used to convert the string data type to an object data type. To make the function generic, it has to take a string argument and concatenate it to the "On" naming convention used in the image object constructor. To convert the string to its corresponding object reference, we must use the eval method. See also: using eval() to execute scripts.

To complete the rollover effect, the exact same technique is used to accomplish the onMouseOut effect:

function showOff(imgName) {
document.images[imgName].src = eval(imgName + "Off.src");
}

And to invoke both functions:

<a href="#" onMouseOver="showOn('contact')" onMouseOut="showOff('contact')">
<img src="../images/contactOff.gif" border="0" name="contact">
</a>

Don't forget to set the image border attribute to zero to avoid a link outline around the image.

View the Source