Mouseover Images

In the following sections, we'll take the basic mouseover that we created in the last section and add a couple of bells and whistles that will improve its expandability and performance. Overall, these are good skills to know if you're going to be making serious use of mouseovers in the pages you design.

Sharing Functions

In our basic mouseover, we used one <IMG> tag and two JavaScript functions to obtain the effect we were looking for, but on a page with 5 mouseovers, that would mean having to write 10 different functions (not to mention coming up with 10 different names for them!). What if there was a way to use the same two functions for all the mouseovers on your page?

As it turns out, this is surprisingly easy to do. First, we must create JavaScript variables that contain the filename of each mouseover's "on" and "off" image. If, for example, we had created a page with three <IMG> tags that we wanted to be mouseovers, and we'd named these images "first", "second" and "third" using the NAME attribute of the <IMG> tag, we would create variables with names of the form name_on and name_off, like this:

var first_off = "image1off.gif";  
var first_on = "image1on.gif";  
var second_off = "image2off.gif";  
var second_on = "image2on.gif";  
var third_off = "image3off.gif";  
var third_on = "image3on.gif";

The next thing we have to do is set up the onMouseOver and onMouseOut event handlers to pass the name of the image to change to our functions. For example, the code for our "second" Mouseover would look like this:

<A HREF="second.html" onMouseOver="activate('second')"    
onMouseOut="deactivate('second')"><IMG SRC="image2off.gif"  
WIDTH=70 HEIGHT=30 BORDER=0 NAME="second"></A>

Notice that the argument (the text to be passed to the function) is surrounded by single quotes ('). This is so that they don't interfere with the double quotes (") that surround the event handler.

By passing the name of the image to be changed to our activate and deactivate functions, we give them a way to know which image to change when they're triggered. This is how we manage to share the two functions between as many mouseovers as we want. All that's left is to modify these functions to receive this image name, and use it to modify the correct image.

The code for our new functions will look like this:

function activate(imgName) {  
document.images[imgName].src = eval( imgName + "_on" );  
}  
 
function deactivate(imgName) {  
document.images[imgName].src = eval( imgName + "_off" );  
}

By placing the word imgName between the parentheses that follow the name of the functions, we tell them to accept a value that's being passed to them (in this case, the name of the image to change), and stick it into a variable called imgName until we finish processing the function. We then make use of this variable in two places. First, we use it to indicate which image object who's src property we want to change (images[imgName]). Second, we use it to refer to the variable that contains the correct filename. This is done using the eval(...) built-in function.

eval( imgName + "_on" )

All this does is takes the value of the imgName variable, sticks it together with the piece of text "_on" and then evaluates the result as if it were a normal piece of JavaScript code. To make this as clear as possible, let's go through what would happen if the onMouseOver event handler were triggered on the image named "third".

When the onMouseOver event handler is triggered, it runs the activate function, and passes it the name of the image -- "third". The function accepts this argument, and places "third" wherever the variable imgName appears.

function activate("third") {  
document.images["third"].src = eval( "third" + "_on" );  
}

The eval(...) built-in function sticks the two strings it has together (as indicated by the '+' operator) and then evaluates it as if it were a normal piece of JavaScript:

document.images["third"].src = third_on;

Now third_on is the name of the variable containing the "on" image filename for the "third" image, so its value is substituted in:

document.images["third"].src = "image3on.gif";

And that's it -- we're left with a statement of the same form we used for our basic mouseover, which will change the src property of the "third" image to "image3on.gif"! The key was in naming the variables that contained the filenames so that the eval(...) function could come up with the variable name by just tacking "_on" or "_off" onto the end of the name of the image.