"MouseOvers" are more commonly referred to as "RollOvers". RollOvers are just a special case of Image Swapping. In this case, the onMouseOver Event Handler is used to trigger the Image Swap and the Event Handler onMouseOut is used to put the original image back in place when the mouse moves away.

There are 3 parts to creating a RollOver:

1. Create the Image and the Event Handlers using HTML.
2. Write the JavaScript code that "Pre-loads" the images involved.
3. Write the JavaScript code that actually makes the Image Swap happen.

Step One: Writing the HTML

The simplest way to write the HTML for a RollOver is to assume the image is a link and put the Event Handlers into the <A HREF=... > tag. It looks like this:

<A HREF="anotherPage.html"
  onMouseOver="imgOn('ra')"
  onMouseOut="imgOff('ra')">
<IMG NAME="ra" SRC="raOff.gif" >
</A>

Notice that we've written Event Handlers that call two different Functions, imgOn() and imgOff(). Whenever the mouse passes over the image "raOff.gif" the first Function is called. When the mouse passes out of the image, the second Function is called. Also notice that we've given the image a name "ra" (resting - active), which we'll use to refer to this image later.

The last step in this 3 part process will be to write these 2 Functions. But first...

Step Two: Pre-loading the images

It's important to Pre-load the images so that they can appear the instant the onMouseOver Event occurs. In order to create one RollOver effect, you need to download 2 images:

1. the image that indicates the active state of the button and
2. the image that indicates the resting state of the button.

The resting state image is the one that is already loaded by the HTML, but you need to Pre-load it anyway in order to guarantee a smooth effect.

if (document.images) {
     var raOn = new Image();
     raOn.src = "raOn.gif";

     var raOff = new Image();
     raOff.src = "raOff.gif";
}

There are two steps to this process. The first step, is where you create the Image Object and give it a name. The "new" command is used to generate a new Object with all the same Properties as an HTML image Object in the document hierarchy. Most importantly, this Object has a .src Property, and in the second step, we set the Image Object's .src Property to equal the location of a graphic stored on the Web. NOTE: An Image Object is created entirely within JavaScript and does not necessarily appear on the page. This kind of Image Object's Properties and Methods are accessed directly by using the Object's name and not through the document Object hierarchy.

Let's review what's going on here: the graphic raOn.gif is the one that we want to appear when the RollOver occurs, and the graphic raOff.gif is the one we want to appear when the mouse is not over the image. We've pre-loaded both of these graphics into Image Objects, which are called raOff and raOn, so that we can use them to make these images instantly appear when we want them to.

The JavaScript runtime engine creates an Image Object corresponding to each <IMG...> tag in your document. It puts these objects in an array in the document.images property. You access an Image Object by indexing this array. So the if (document.images) determines whether the browser supports the JavaScript images array. If the browser doesn't it will ignore everything between the braces ({}). document.images is way to check for browser compatibility. NOTE: For example, IE3.x does not support the Images Array. Without the if (document.images) we would get error messages.

Step Three: write the Functions that make the Image Swap happen

The next step is to create an Event Handler to call the Function that will change the image. For convenience, let's make the Event Handler be associated with the image itself (although it doesn't have to be...).

So, now we create the Functions referred to in step one, imgOn() and imgOff(). They look like this:

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

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

These two Functions actually do the Image Swapping. The first one changes the .src Property of the image on the page (which is contained within the document Object) to the .src Property of the Image raOn (which was created in JavaScript). The second Function puts the original graphic back in place. NOTE: eval() takes a string and converts it to an "Object" that was defined above without eval(), the result would be a string that would not be an "Object"

Again, we use the if (document.images) to insure browser compatibility. Remember, not all browser support the Images Array.

Here's how it works:

Ways to refer to the Images

Also, here's a hint that will help you avoid problems. There are two ways to refer to items in the JavaScript Object hierarchy. I have usually told you to refer to them by number because it's simpler. So when you refer to an image on a page by number, it looks like this:

document.images[0]

However, if the image is named (using the "name" attribute in HTML), you can replace the number with the image's actual name, like this:

document.images['image name']

NOTE: For some unknown reason, if you put an image in a table, Netscape 3.0 will only allow you to replace the image if you refer to it by name. Numbers cause problems. I don't know why, that's just the way it is. So always use the HTML name attribute to name images that you plan to replace. And use that name to refer to the Image Object when you use JavaScript to replace it.

SUMMARY - The 3 "Necessary" steps to have a "Successful" Image Swap:

1. Use HTML to create an image on the page first.
   You have to use HTML to put an image on the page before you can set another image in its place. This means that you're restricted to the original size and location of the image as it was specified in the HTML document. (DHTML changes this rule.) Create an Image Object the ordinary way (with an <IMG SRC=...> tag) down in the <BODY> area.

2. Pre-load your images and store them in an Image Object
   You may have noticed that when a RollOver is done right, the new image replaces the old one instantaneously -- you don't have to wait for it to download before you can see it. JavaScript makes it possible for you to Pre-load images and store them in Image Objects that don't appear on the page. Pre-load an Image -- is usually done in the head section of the document. This is done by creating an Image Object (note the capital "I" in Image, this is how this kind of Image Object is referred to in JavaScript, it's not something I chose to do). Unlike the image Objects that you're already familiar with, which correspond to graphics placed on a Web page using HTML, an Image Object is created entirely within JavaScript and does not necessarily appear on the page. This kind of Image Object's Properties and Methods are accessed directly by using the Object's name and not through the document Object hierarchy.
   
   When a graphic is Pre-loaded it's available to appear instantly on the page as soon as the Image Swap is initiated.
   
   The Pre-loading process needs be wrapped in the if (document.images) in order to insure "browser compatibility".

3. Create an Event Handler
   The Event Handler will trigger the Function that swaps the images.

4. We also need to incorporate if (document.images) in our functions, imgOn() and imgOff(), in order to insure "browser compatibility".