Dave's Amazing JavaScript Image Rollover Guide -- With Special Thanks to CCNMTL

Overview

Image rollovers are a nice way to highlight a menu or directory LINK. The way they work is that the javascript program tells the browser to display one image when the page loads up and the mouse cursor is not over the image and another image when the mouse cursor does move over the image.

The image that appears when the mouse is NOT over the image area is called the non-active image.
The image that appears when the mouse IS over the image area is called the active image.


Image Files

The images can be any two different images but it is recommended that the images be of the same size, i.e. the same length and width in pixels. This is done so that when one image replaces the other, the rest of the page's formatting is not modified.

For example, the directory image rollovers at http://gateway.seas.columbia.edu consist of an image of the word say "Courses" as the non-active image and an a copy of the word "Courses" image that has been lightened in photoshop and been saved to be used as the active image.

The naming of the image files is extremely important. The names of the two image files must exactly the same with the exception of the last letter. The non-active image file's name will end in an "n" and the active image file's name will end in an "a". So for example, the two image files for "Courses" would be coursesn.gif and coursesa.gif.


<HEAD> Code -- The <SCRIPT> Tag

The javascript code is placed in the <HEAD> section of the HTML code, between beginning and end <SCRIPT> tags. The resulting HTML code looks something like this:

<HEAD>
<SCRIPT LANGUAGE="JavaScript"> if (document.images) { var coursesn = new Image(); coursesn.src = "images_g/coursesn.gif"; var coursesa = new Image(); coursesa.src = "images_g/coursesa.gif"; } function act(imgName) { if (document.images) document[imgName].src = eval(imgName + "a.src"); } function inact(imgName) { if (document.images) document[imgName].src = eval(imgName + "n.src"); } </SCRIPT>
</HEAD>

The code can be broken down into three sections. The only part you need to modify is the first section. The two sections that start with function: DO NOT CHANGE.

The part of the first section you need to change is the name of the image files. So to change the above code for a pair of image files called "namen.gif" and "namea.gif" located in my images folder inside my public_html folder the first section of code would look like:

if (document.images) {
var namen = new Image();
            namen.src = "images/namen.gif";
            var namea = new Image();
            namea.src = "images/namea.gif";
          }
You do not need to have more first sections to have more than one image rollover on your page. To add more images rollover pairs add additional chuncks of the code in brackets, i.e. if I also wanted to have a pair of image files rollover called "somethingn.gif" and somethinga.gif" the first section of code would look like:

if (document.images) {
var namen = new Image();
            namen.src = "images/namen.gif";
            var namea = new Image();
            namea.src = "images/namea.gif";
var somethingn = new Image();
            somethingn.src = "images/somethingn.gif";
            var somethinga = new Image();
            somethinga.src = "images/somethinga.gif";
          }

<BODY> Code -- New <A> and <IMG> Attributes

Now that the script is set up you need to place the location of the rollover within the <BODY> of the HTML code. This is done by adding several attributes to <A> and <IMG> tags that call upon the javascript code. So the code to place the Courses image would be:

<A HREF="directory/courses.html" onMouseOver="act('courses')" onMouseOut="inact('courses')" onclick="inact('courses')" TARGET="_parent"><IMG SRC="images_g/coursesn.gif" NAME="courses" BORDER=0 ALT=""></A>
The Attributes TARGET, BORDER, and ALT are not necessary but are highly suggested components. To modify this line of code to say the "namen.gif" and "namea.gif" pair and to be a link to the page "wherever.html" the code would look like:

<A HREF="wherever.html" onMouseOver="act('name')" onMouseOut="inact('name')" onclick="inact('name')" TARGET="_parent"><IMG SRC="images/namen.gif" NAME="name" BORDER=0 ALT=""></A>