Article
Mouseover Images
How Mouseovers Work
Now that you know how to change an image's appearance using JavaScript, we need to figure out how to do this when the user places the cursor over the image. Also, we need to know how to switch it back again when the user's mouse isn't over the image anymore. The feature of JavaScript that allows us to do this is called event handlers.
Event handlers can be thought of as "triggers" that cause things to happen when a certain condition is met. The two event handlers that interest us when it comes to Mouseovers are onMouseOver and onMouseOut. These allow you to define certain pieces of JavaScript to be run whenever the user's mouse hovers over or passes out of a given HTML element.
While the HTML 4.01 specification says that we should be able to define onMouseOver and onMouseOut event handlers for any HTML element, Netscape Navigator falls a bit short by only providing this facility for the anchor reference (<A HREF>) tag. This means that Netscape can only detect the mouse moving over and out of hyperlinks, and if we want to make a Mouseover, the element that is "sensitive" to the mouse must be a link. This isn't too much of a problem if we want to make a mouseover that isn't also a link, because we can easily make a "link to nowhere" around our image as follows:
<A HREF="javascript:void(0)"><IMG SRC="imagefile.gif"
NAME="myimage" WIDTH=75 HEIGHT=40 BORDER=0></A>
This creates a link that does nothing (void) when clicked. If you did want it to link to something, you'd just stick your URL in the place of javascript:void(0). To add our event handlers is as simple as inserting them as attributes to the <A HREF> tag:
<A HREF="javascript:void(0)" onMouseOver="overmyimage()"
onMouseOut="outmyimage()"><IMG SRC="imagefile.gif" NAME="myimage"
WIDTH=75 HEIGHT=40 BORDER=0></A>
In the above, overmyimage() and outmyimage() are JavaScript functions that handle changing the image between the "on" and "off" states. A function is a piece of JavaScript that has been set aside to be "triggered" at some later time. In most cases, functions are defined in the header of your HTML file (between the <HEAD> and </HEAD> tags). Our overmyimage() function would look something like this:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from older browsers
function overmyimage() {
... code here ...
}
// End script hiding -->
</SCRIPT>
</HEAD>
We would insert the code that's to be run whenever this function is called (triggered) at the spot I've indicated.
Now, armed with a basic knowledge of the image object, event handlers, and functions, we are now ready to create...
Our First Mouseover
If you've been following closely and fully understand the elements I've covered so far, their assembly into a working mouseover should be almost obvious. If you're a bit confused though, don't worry -- I'll take you through it step by step in this section so that everything becomes clear.
First, let's start by creating our image. It will be 70 pixels wide and 30 pixels high, and the filename for the "inactive" image will be "off.gif". We do this just as we would normally, using the HTML <IMG> tag. We'll also use the NAME attribute to assign it the name "my1stMouseOver".
<IMG SRC="off.gif" WIDTH=70 HEIGHT=30 BORDER=0 NAME="my1stMouseOver">
Now we'll add a "link to nowhere" around our image, so that we can hook in onMouseOver and onMouseOut event handlers, set to trigger JavaScript functions that "activate" and "deactivate" the image. Appropriately enough, we will call these functions activate() and deactivate().
<A HREF="javascript:void(0)" onMouseOver="activate()"
onMouseOut="deactivate()"><IMG SRC="off.gif" WIDTH=70
HEIGHT=30 BORDER=0 NAME="my1stMouseOver"></A>
Now all that's left is to write the JavaScript functions, activate() and deactivate(). The activate() function will change the src property of the "my1stMouseOver" to the "active" image file, which we'll call "on.gif".
function activate() {
document.images["my1stMouseOver"].src = "on.gif";
}
Similarly, the deactivate() function will change the src property of the "my1stMouseOver" back to the "inactive" image file, "off.gif".
function deactivate() {
document.images["my1stMouseOver"].src = "off.gif";
}
And that's it! We've now created an image that displays "off.gif", except when the user places the mouse pointer over it, at which time it changes to display "on.gif". When the user moves the mouse away again, it goes back to displaying "off.gif".