Here’s what a rollover looks like. Move your cursor over the blue button below to see it in action.
<!-- Hide script from older browsers
offButton.src = “images/blueButton.gif”
onButton.src = “images/redButton.gif”
offButton = “”
onButton = “”
// End hiding script from older browsers –>
<a href=”#” onMouseover=”document.myButton.src=onButton.src” onMouseout=”document.myButton.src=offButton.src”><img src=”images/blueButton.gif” alt=”button” width=”119″ height=”25″ border=”0″ name=”myButton”></a>
To start, you’ll need two identically sized, nontransparent buttons. (In this example, I’ve called them blueButton.gif and redButton.gif.) I’m going to show you how to display a blue button that changes color (to red) when the cursor moves over the button.
For this example, I’m assuming that you’ve already tried
“Your First Script.” I’m not going to explain the parts of the above HTML that I covered in that article, so if you think this is too advanced, you might want to go back and review those concepts again.
Start with the code I outlined in
“Your First Script,”
and add just one image to the bottom of the page:
<img src="images/blueButton.gif" alt="button" width="119" height="25" border="0" name="myButton">
The only differences you should see between this and the garden-variety image tags you’ve been adding to your HTML all along is a new attribute:
attribute (in quotes directly after
) so it can refer to this image later. In this case, you’re going to name this image
myButton, which will later be referred to as
document.myButton. Names can’t have spaces or start with numbers; beyond those limitations, you can call them just about anything you’d like.
Up at the top of the page, inside the
section, is a
Now, see that brace (
) will execute instead.
onButton, respectively. An
isn’t always an image displayed on the screen when the page first loads. Instead, it can be an image, such as redButton.gif, that your JaveScript code grabs and displays only when the user performs a particular action. Here, you’ll need two image objects for the two different versions of the button.
offButton.src = "images/blueButton.gif"
onButton.src = "images/redButton.gif"
This is where the image objects stored for later on learn about the actual physical files they’re associated with. In each case, set the
(read: “source”) property of the image object to the folder in which the image is located. In this example, the off version of the button is set to the blue version of the image, and the on version of the button is set to the red version of the image. So now, I’ve showed you how to map the onButton image to the redButton.gif, and the offButton image to the blueButton.gif.
offButton = ""
onButton = ""
document.myButton = ""
Basically, you have to trick older browsers into accepting the minimum code necessary to load the page smoothly. The
variables (those characters within the quotation marks) are set to
, or in other words, nothing at all. In this case, the three variables that the browsers need to recognize are offButton (the off version of the image), onButton (the on version of the image), and document.myButton (the image that’s actually displayed in the browser).
<a href="#" onMouseover="document.myButton.src=onButton.src" onMouseout="document.myButton.src=offButton.src">
When the cursor moves over the image, the onMouseover event handler is triggered. That causes the line of code
to run. Remember that because we named our image myButton, we created a new image object document.myButton. In order to change the image that’s displayed, we need to update the
property of this image. Because this is the moused-over version, we set
onButton.src, the red (on) version of the button image.
When the cursor moves off the image, the onMouseout event handler is triggered. That causes the line of code
to run. As you’d expect by now, it sets
offButton.src, the blue (off) version of the button image.
onButton.src, as the case may be).
This code can be used to handle multiple buttons on a page, of course. You just need to give each button a name (using the
attribute of the
tag), and create two new image objects per new button in the header script. And make sure that all those names are unique: one of the main errors that occurs when you copy and paste a bunch of code to duplicate existing scripts is that you can forget to change the names of the images to reflect the new ones you wish to use.
Now that you’ve seen how simple adding a rollover image can be, aren’t you glad you didn’t spend several hundred dollars on a WYSIWYG tool? On the other hand, those expensive programs do try to give you your money’s worth: a page such as the one I’ve just described that is created with a tool would result in at least three times the code, with no extra benefit. This way, your code is cleaner and your page loads faster. And best of all, you know how it works.
DORI SMITH is co-author of
, 3rd Edition and author of
Java for the WWW: Visual QuickStart Guide
. In addition to writing, she has been programming for more than 20 years and conducts workshops at industry conferences.