by Dori Smith
In my previous column, I showed how to do a simple image rollover. In the real world, however, it's rare that you're going to ever have just one rollover on a page. In this column, we'll cover how to add multiple rollovers to your Web page. Let's start off by looking at the code (which you can see in action here):
<html>
<head>
<title>Rollover Script</title>
<script type="text/javascript">
<!-- Hide script from older browsers
if (document.images) {
button1Red = new Image
button1Blue = new Image
button2Red = new Image
button2Blue = new Image
button1Red.src = "images/redButton1.gif"
button1Blue.src = "images/blueButton1.gif"
button2Red.src = "images/redButton2.gif"
button2Blue.src = "images/blueButton2.gif"
}
function chgImg(imgField,newImg) {
if (document.images) {
document[imgField].src = eval(newImg + ".src")
}
}
// End hiding script from older browsers -->
</script>
</head>
<body bgcolor="#FFFFFF">
<p><a href="#" onMouseover="chgImg('button1','button1Red')"
onMouseout="chgImg('button1','button1Blue')"><img src="images/blueButton1.gif"
width="113" height="33" border="0" name="button1" alt="button1"></a></p>
<p><a href="#" onMouseover="chgImg('button2','button2Red')"
onMouseout="chgImg('button2','button2Blue')"><img src="images/blueButton2.gif"
width="113" height="33" border="0" name="button2" alt="button2"></a></p>
</body>
</html>
If you've read my previous column, most of this should look pretty familiar. If not, go back and review it first.
if (document.images) {
button1Red = new Image
button1Blue = new Image
button2Red = new Image
button2Blue = new Image
button1Red.src = "images/redButton1.gif"
button1Blue.src = "images/blueButton1.gif"
button2Red.src = "images/redButton2.gif"
button2Blue.src = "images/blueButton2.gif"
}
This code is similar to that from last time, except that now, we've gone from two image objects to four. You'll need to have two image objects per rollover, so where previously we had two image objects to handle one rollover, we now need four image objects to handle the two rollovers in this example. Two image objects are needed because two different images are displayed per rollover: the on version, and the off version.
In this area of the code, we start by creating the four new image objects, and then the src (read as "source") property of each is initialized to the location of the image file itself, relative to the web page. As always, we only want to do this if the browser itself supports image manipulation via JavaScript, so we start off by checking to see if document.images exists.
function chgImg(imgField,newImg) {
Here, we start to create our first JavaScript function. A function is a group of lines of code that you're going to want to use over and over again. You define a function by starting with the word function followed by the name of the function, in this case, chgImg.
The name of the function is followed by a set of parentheses, and inside the parentheses are zero or more parameters. A parameter is some information passed into the function for the function to act upon, and the parameters are separated by commas. In this case, we're passing two parameters, imgField and newImg. When the chgImg function is called (as you'll see later) it can be passed any string values as parameters, but inside the function the parameters are always referred to by these names.
The function then starts off with an open brace, just like the way the code is contained within an if statement and for the same reason: everything within the braces is what's going to be executed by JavaScript.
if (document.images) {
Again, we only want to do the code inside this function if the user's browser is capable of handling images via JavaScript.
document[imgField].src = eval(newImg + ".src")
Here's where the rollover actually happens.
The imgChg function is passed two parameters: imgField and newImg. The former is the name of the image to be changed, and the latter is the image object that is to replace is. We're using a handy little JavaScript trick here, in that JavaScript thinks that document.myButton is the same thing as document["myButton"]. Because of this, changing document["myButton"].src is exactly the same thing as changing document.myButton.src (as we did in the previous column).
On the right side of the assignment statement, we're creating an image object on the fly by using JavaScript's eval method. This method takes in a string, evaluates it (hence the name eval), and returns a result of that string turned into an object. So, if newImg is the string "redButton", we take that and concatenate the string ".src" onto the end of it, resulting in the string "redButton.src". The eval method then evaluates that string, and returns the actual image object redButton.src.
Setting document["myButton"].src to redButton.src would cause the red version of myButton to appear, assuming that there was an image named myButton on the page, and that redButton had been created as a new image and the src property had been set to the appropriate image file.
<a href="#" onMouseover="chgImg('button1','button1Red')"
onMouseout="chgImg('button1','button1Blue')"><img src="images/blueButton1.gif"
width="113" height="33" border="0" name="button1" alt="button1"></a>
Here's the actual image on the Web page, which has been given the name button1. The chgImg function is called by both the onMouseover and onMouseout event handlers, both of which pass 'button1' as their first parameter. The second parameter is the version of the button that we want to display after the event has taken place, and so, onMouseover passes 'button1Red' in this place. This means that whenever the user's cursor moves over the button1 image, the red version of the button (as stored in button1Red.src, above) will be displayed. And as you might expect by this point, the onMouseout event handler passes 'button1Blue' as its second parameter, which will cause the blue version of the button to be redisplayed when the cursor moves off of button1.
<a href="#" onMouseover="chgImg('button2','button2Red')"
onMouseout="chgImg('button2','button2Blue')"><img src="images/blueButton2.gif"
width="113" height="33" border="0" name="button2" alt="button2"></a>
And here's the last piece of code, which looks very similar to the previous piece. The only differences are in the name of the image itself (which is then passed as the first parameter to the imgChg function), and the appropriate red or blue image object for the second button, which is passed as the second parameter to imgChg.
In this same fashion, you can add as many buttons to the page as you want. All you need to do is create two new image objects in the head (and set them to the correct file names), and then add your anchor and img tags directly to the page.