Image Rollover Script instructions by R M Gates

Variables: FIRST ¦ ImageNames ¦ OFF ¦ ON ¦ TYPE ¦ PATH
Functions: ButtonOn ¦ ButtonOff ¦ ImagePreload ¦ onMouseOver ¦ onMouseOut ¦ Adding more

Browsers that support the document.images object (version 3+, JavaScript1.1), store all the IMG tags in the document in an Images Array, starting with 0 (document.images[0]). You can change the image by changing the source (document.image[0].src). You can also specify a name attribute in the IMG tag and refer to that.
The first image above is the Mouse Out image. It uses the name attribute to change the image source, the javascript function must be placed in an anchor tag.
This is the simplest way to change an image...

<A HREF="#top" onMouseOver="document.rollover.src='mouseover.jpg';return true;"
	onMouseOut="document.rollover.src='mouseout.jpg'" onClick="return false;">
<IMG SRC="mouseout.jpg" NAME="rollover" WIDTH=130 HEIGHT=30></A>

Be sure you put spaces in between each attribute, I usually don't break lines in the middle of a tag.
If you use the NAME attribute, each tag must use a different name value. In this case I could have used images[0] in place of the name rollover. Using the name lets you refer to a specific image, no matter where it is on the page. The image does not need to be inside an anchor tag, but the onMouse function does.
I only want the image here to change, and I don't want it to be an active link. The onClick="return false;" prevents the link from being followed, and return true; in the onMouseOver function prevents the link from showing in the status window. The cursor still changes to a hand, but nothing happens when you click it. I put #top in the HREF for non-javascript.

Menu Buttons: One Two Three

These images are preloaded so that there is no delay moving the mouse over them. Variables are explained in order.

The FIRST variable:
var FIRST=1;
This is the number of your first menu button. The first IMG tag is 0.
In this case, the first menu button, oneoff.jpg, is the second IMG tag.
If you add a new IMG tag before the first menu button, add 1 to the FIRST variable.
Or if you removed the mouseout.jpg IMG, subtract 1.
So, you can add a logo, or animation at the top of the page without effecting the script, just add one to the FIRST variable.
Any IMG tags added after the menu buttons do not effect the script.

The ImageNames variable:
This is an Array. It contains a list of all the image names, but only the first part of the file name.
The first button is oneoff.jpg and oneon.jpg, so the first ImageNames value is one.
When adding more menu buttons, add the names to this value. Add: ,"filename"
var ImageNames = new Array("one","two","three");
So when adding a forth menu button, homeoff.jpg and homeon.jpg for example, add the first part of the image name.
var ImageNames = new Array("one","two","three","home");
These names must be in the same order as they appear on the page, in the order of the <IMG> tags.
You can add as many menu buttons as you want, or change the order or change the file names. The ImageNames variable is the only value you need to change.

The OFF and ON variables:
This is the last part of the menu image file name for either onMouseOver and/or onMouseOut images. In this case all mouse over images contain on, and all mouse out images contain off in the name.
The Button One image is oneoff.jpg, the Button One mouse over image is oneon.jpg, so ON="on" and OFF="off".
One of the variables can be empty, I could have used one.jpg instead of oneoff.jpg, and OFF="".
var OFF="off"; for onMouseOut images
var ON="on"; for onMouseOver images
This can be any value you want.
If all mouse out images were _out, (like home_out.gif), you would change the OFF variable to "_out".
Both images should be the same size, or the new image may look strange.

The TYPE variable:
This is the file type of all the menu buttons, include the period, for example:
var TYPE=".gif"; for gif images,
var TYPE=".jpg"; for jpg images,

The PATH variable:
This is the path to your menu image files, it can be a relative path or an absolute path. In this case the menu buttons are in the current path:
var PATH="";
If your menu buttons were in a buttons folder, change the PATH value to "buttons/":
var PATH="buttons/";
You can use an absolute path also, like http://www.server.com/buttons/.

The rest of the JavaScript code does not need to be changed.

The onMouseOver and onMouseOut functions:
onMouseOver="ButtonOn(0)"
onMouseOut="ButtonOff(0)"
These must both be in the <A> tag that surrounds the <IMG> tag of each menu rollover image.
The only value to change here is the number (0), the first menu button is 0, etc.
The values are numbers, so don't use quotes.
The shortest way to write this would be:

<A HREF="" onMouseOver="ButtonOn(0);" onMouseOut="ButtonOff(0);">
<IMG SRC="oneoff.jpg" WIDTH=130 HEIGHT=30></A>

Although ALT should be included in the IMG tag
Also for best results, it should be on one line with no breaks or spaces between tags
So when adding a menu button, copy the last image line, change the HREF, the IMG SRC, add one to the two numbers (2), like this:

<A HREF="home.htm" onMouseOver="ButtonOn(3);" onMouseOut="ButtonOff(3);">
<IMG SRC="homeoff.gif" WIDTH=130 HEIGHT=30></A>

Here the IMG SRC is the same as onMouseOut, but it doesn't have to be.

Nothing else needs to be changed.

Adding the code to your page

The ImagePreload() function:
You must run this function somewhere on the page!
I have placed it in the BODY tag with an onLoad() action, so that the new images load after the page finishes loading.
If the page takes a long time to load, an error could occur, such as object undefined. If this happens simply write ImagePreload() into the Script tags at the bottom before the //--> line. Or write ImagePreload() in Script tags somewhere in the body, the bottom of the page is a good place for it. Be sure to remove onLoad() from the <BODY> tag if you do.

Here is the whole working script in a zip file you can download: rollover.zip.
Just copy the JavaScript section and paste it into your HEAD section. Then, of course, add the onMouseOver and onMouseOut functions to your menu link tags, add onLoad="ImagePreload()" to your BODY tag, add your filenames to the ImageNames, and your done.

The image file name:
This script is written so that you can use any file name you want for the menu images, with only these requirements:
All images must be the same file type.
All images must be in the same folder.
The mouse over and mouse out image for a menu button must share the first part of their filename.
All mouse over images, and/or mouse out images must share the last part of the filename.
These requirements can be changed by changing the order of the variables in the ImagePreload function.

This script is written so you can easily modify and add image names and locations, or even add more functions such as status messages.
You can also change to onMouseup and onMouseDown actions without modifying the script, or add these functions as new actions with little modifications to the script. You should not use the onClick function to change images.
Unused variables can be removed, for example you can remove var PATH="", but also remove PATH+ from the ButtonsOff[i].src = and ButtonsOn[i].src = lines.
You can add status messages by creating a var messages=new Array() similar the ImageNames line, and puting the messages you want in the Array list. Then add window.status=messages[A]; to the ButtonOn() function, and window.status=""; to the ButtonOff() function. You will also need to add ;return true; after the onMouse functions to return the status value, see first image code.
Many other cool things can be added such as sounds, or changing other images on the page, or even other frames.

More Tips ¦ Top of Page ¦ rmgates@usa.com ¦ BigSleep Net