Note: This script has been superseded by the new mouseover script. I retain a copy because I need to move some of the information to new, as yet unwritten, pages.
In addition, the new script works with <IMG NAME>, which is not allowed if your pages have to validate. In that case you need to use this script.

document.images is not supported by Netscape 2 and Explorer 3, so this script won't work.

Mouse Over

To the script.

The most wanted script, no doubt, is the standard image-swap mouseover. When the user moves over an image that's also a link, the image changes slightly, giving a nice effect. In fact, you load a different image at the place the first image was.

Scroll over the images below with your mouse to see the effect. (OK, I admit that they're not particularly beautiful)

Now, there are literally dozens of ways to do this. The script below is the one I always use. I think it's a really lean script, without the horrible cluttering of code I've often seen. I also use this code for swapping the images above. So, if you want to see a real working example, view the source.

It does rely, however, on all images involved in the effects having specific names. If you don't want to change the names of your images, look for another script.

Also, this script won't work in Explorer 3, but then again, none will, because Explorer 3 doesn't support the Images Object. Therefore, it's impossible to change images using JavaScript in Explorer 3.

 

Name vs. number

The first problem you encounter is the question whether to uses names or numbers. To be able to change an image using JavaScript, you have to tell the script which image to change. This can be done in two ways:

  1. By giving the image a name, like <IMG SRC="image.gif" NAME="first_image" etc.>. Then, you can change the image by calling it by its name.
  2. By using the image number. This is an automatic feature of JavaScript. When a page has been loaded, each image in it gets a number, starting at 0. Note that the number is determined by the order in which the images appear in the source code. The first image in the code is image 0, the second image 1 etc.

In practice, both methods are equivalent. However, those that want their sites to validate are required to use the number method.

Generally speaking, if your page is ready and all images you want to mouseover are next to each other in the source code, use numbers. This enables you to make your script even more clear (see below for details).
If your page is likely to change a lot and mouseover-images will often be added or placed somewhere else, use names.
In all other cases, it doesn't really matter.

The script below is written for names. Later on, I'll tell you what to change to use numbers instead.

 

Names of the images

Now this is apt to lead to some confusion. There are three specific image names that you'll encounter:

  1. The actual, "physical" name of the image on the server. HTML uses this name to load the image into the page. JavaScript doesn't use this name after the pre-loading has ended (see below).
    For instance: "image_1_nrm.gif". This is the image on the server. It's loaded by the HTML and also by the pre-load script.
  2. The name of the image in the JavaScript array. The script below starts by loading the images into a JavaScript array. I'll explain this in detail later on. HTML doesn't recognize this name.
    For instance: The script loads "image_1_nrm.gif" into "nrm[1].src". Thus, later scripts can refer to that name.
  3. The name of the image (or, more correctly, the name of the place in the page where an image is swapped) as explained above.
    For instance: When image 1 is swapped back onMouseOut, the script knows it should load nrm[1].src into the image-"slot" named "image".

When using this script, the following happens:

First of all, the images are downloaded from the server. This requires their "physical" name (no. 1 above). The HTML code uses this name to load the initial ("normal") images into the page.

The JavaScript also uses the "physical" name to download the images from the server, but immediately loads the images into an array. Form that moment on, JavaScript uses the array name (no.2 above).

When the script actually switches images, it uses the third name or the number (as explained above) to determine where the image is to be placed and the second name to determine which image should be placed there.

 

Preparations

First, make sure that images that will be replacing each other have exactly the same width and height.

The script below is written for specific image names. When using this script, you should give your images the following names:

For the first image:
"image_1_nrm.gif" (normal image)
"image_1_over.gif" (mouseover image)

The second one:
"image_2_nrm.gif" (normal image)
"image_2_over.gif" (mouseover image)

And so on. Of course, you can use other names, but you'll have to change a few variables. You do need the number, though.

 

The script

OK, now you've done this, you can add the script in the <HEAD> of the page. 

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var number = 2;
var base = "image_";
var nrm = new Array();
var omo = new Array();

if (document.images)
{
	for (i=1;i<=number;i++)
	{
		nrm[i] = new Image;
		nrm[i].src = base + i + "_nrm.gif";
		omo[i] = new Image;
		omo[i].src = base + i + "_over.gif";
	}
}
	
function over(no,name)
{
	if (document.images)
	{
		document.images[name].src = omo[no].src
	}
}

function out(no,name)
{
	if (document.images)
	{
		document.images[name].src = nrm[no].src
	}
}
	
// -->
</SCRIPT>

In the HTML-page itself, you'll have to add the mouseover and mouseout event handlers to the <A>-tag. 

<A HREF="whatever.html" onMouseOver="over(1,'image')"
 onMouseOut="out(1,'image')">
<IMG SRC="image_1_nrm.gif" NAME="image" etc.> </A>

<A HREF="whatever.html" onMouseOver="over(2,'second_image')"
 onMouseOut="out(2,'second_image')">
<IMG SRC="image_2_nrm.gif" NAME="second_image" etc.> </A>
 

Explanation

Skip explanation.

First, define some constants. number is the number of images on the page (in this case, 2). base is the first part of the name of the images, in this case "image_". If you want to use different names for your images, you'll have to change this variable, too. Then two arrays are defined, in which the images will be loaded, one for the normal images, one for the mouseover images. 

var number = 2;
var base = "image_";
var nrm = new Array();
var omo = new Array();

Then, start the Pre-load-script. This script loads the images into two JavaScript arrays. Also, it starts downloading them from the server. This is very useful, in that when the user scrolls his mouse over an image and the image is replaced by another one, he doesn't have to wait for the second image to be downloaded: it is already in his cache.

First, make sure that this script is only executed when the Images Object is supported. If it isn't, the browser will give errors. In practice, the only browser to give problems is Explorer 3. As you can see, every script that does something to the Images Object has this if statement to prevent error messages. 

if (document.images)
{

If the Images Object is supported, the pre-load script is executed. The two arrays defined earlier are now filled with the correct images.
All images that end with "_nrm.gif" are the normal images, they're loaded into the nrm[]-array.
All images that end with "_over.gif" are the mouseover images, they're loaded into the omo[]-array.

As you see, the "physical" name of the images (see above) is concatenated by taking base (in this case: "image_"), the "physical" image number (represented by the variable i, going from 1 to number) and the ending "_nrm.gif" or "_over.gif".

If you want to change the ending of the names of your images, you'll need to change the endings here, too. 

	for (i=1;i<=number;i++)
	{
		nrm[i] = new Image;
		nrm[i].src = base + i + "_nrm.gif";
		omo[i] = new Image;
		omo[i].src = base + i + "_over.gif";
	}
}

Now, we'll need to define the functions. There are two, one for changing the image onMouseOver, and one for changing it back onMouseOut.

The event handler actually calling the function needs to tell it two things: which image should be inserted and where the image should be inserted.

no tells the function the number of the image that is to be inserted. This number is the one determined in the preload script above.

name tells the function where the image is inserted. This can be either a name or a number (see above).

Of course, we'll also need to check if the Images Object is supported. If not, the function should not execute. 

function over(no,name)
{
	if (document.images)
	{
		document.images[name].src = omo[no].src
	}
}

function out(no,name)
{
	if (document.images)
	{
		document.images[name].src = nrm[no].src
	}
}
	
// -->
</SCRIPT>

The script is complete, now we only need to add the actual event handlers.

In the anchor around the image, we'll have to add onMouseOver and onMouseOut, which call the functions.

In the image-tag itself, you'll need to add a name="" if you need it

In this example, the name of the image is image. The event handlers pass this name on to the functions. The number of the image is 1. 

<A HREF="whatever.html" onMouseOver="over(1,'image')"
 onMouseOut="out(1,'image')">
<IMG SRC="image_1_nrm.gif" NAME="image" etc.> </A>

<A HREF="whatever.html" onMouseOver="over(2,'second_image')"
 onMouseOut="out(2,'second_image')">
<IMG SRC="image_2_nrm.gif" NAME="second_image" etc.> </A>

Add all links and make sure the number and name are correct.

Now your mouseover function is ready. If you still don't entirely understand, view the source. I'm using the script in this page.

 

Using numbers instead of names

If you don't want to use the names because of validation, you'll need to change the event handlers in the anchor from "out(1,'image') to out(1,1) and so on. Remember: the first image on a page is image 0, the second is image 1, etc. Remove the name-attribute from the image tag.

If all images you want to mouseover are behind each other in the source code (no other images in between them), you can make the script even leaner.

If you want to do this, you'll have to change the following:

Add a variable offset = in the top of the script, where the other variables are defined. Offset must be equal to the number of images before the mouseovers minus one. So, if there are no images before the mouseovers, offset is -1, if there are 5 images before the mouseovers, offset is 4 etc.

Change the functions to: 

function over(no)
{
	if (document.images)
	{
		document.images[no + offset].src = omo[no].src
	}
}

function out(no)
{
	if (document.images)
	{
		document.images[no + offset].src = nrm[no].src
	}
}

Change the onMouseOver/Out to: 

<A HREF="whatever.html" onMouseOver="over(1)" onMouseOut="out(1)">
<IMG SRC="image_1_nrm.gif" etc.> </A>

<A HREF="whatever.html" onMouseOver="over(2)" onMouseOut="out(2)">
<IMG SRC="image_2_nrm.gif" etc.> </A>

Finished! You now have your very own mouseover-script.
If you wish, you can add an onClick image swap to it.