An Alternative to Dreamweaver's MouseOver fucntion

Here's a mouseover script I've been using for quite sometime. It's fast, simple to use, and works in all browsers. Let's start with the javascript code first:

function switchimage(imgDocID,imgObjName)
{
document[imgDocID].src = eval(imgObjName + ".src");
}

img1 = new Image(79,29);
img1.src = "images/image1.gif";
img2 = new Image(79,29);
img2.src = "images/image2.gif";
img3 = new Image(89,29);
img3.src = "images/image3.gif";
img4 = new Image(89,29);
img4.src = "images/image4.gif";
img5 = new Image(81,29);
img5.src = "images/image5.gif";
img6 = new Image(81,29);
img6.src = "images/image6.gif";

This is all the code needed for 3 onmouseover/onmouseout buttons! But let me explain...

imgDocID is a unique name given to the image you'll use on the "mouseover" image.
imgObjName is the name of the image in the list above (img1, img2, img3, etc.)

img1 = new Image(79,29); creates the imgObjName used in the script.
img1.src = "images/image1.gif"; identifies the source of the image.

You'll need to create this pair of declarations for each image used in the onmouseover/onmouseout sequence.
Note: you can put this code in an external .js file (my preference) or between <script language="javascript"></script> tags in your HTML page.

Now for the code that calls this function:

<a href="index.html" onmouseover="switchimage('[color red]index[/color]','[color blue]img2[/color]');" onmouseout="switchimage('[color red]index[/color]','[color blue]img1[/color]');"><img src="images/image1.gif" name="[color red]index[/color]" width="79" height="29" border="0"></a>

<a href="page1.html" onmouseover="switchimage('[color red]page1[/color]','[color blue]img4[/color]');" onmouseout="switchimage('[color red]page1[/color]','[color blue]img3[/color]');"><img src="images/image3.gif" name="[color red]page1[/color]" width="89" height="29" border="0"></a>

<a href="page2.html" onmouseover="switchimage('[color red]page2[/color]','[color blue]img6[/color]');" onmouseout="switchimage('[color red]page2[/color]','[color blue]img5[/color]');"><img src="images/image5.gif" name="[color red]page2[/color]" width="81" height="29" border="0"></a>

Note the unique [color red]image names[/color] in red. Note that this ID is unique to each onmouseover/onmouseout event for a given image. If you're implemetation doesn't work, this is the place to look for the problem. If this ID isn't unique to the given image, the mouseover won't work properly.

Also note the [color blue]image name[/color] attribute in blue. This is the same name used in the javascript to identify the image. Again, this name MUST BE UNIQUE or the mouseover won't work. (Note that this name is different for the mouseover and mouseout image - img2 for onmouseover and img1 for onmouseout. Of course, you can change this to suit your needs.)

I've had as many as 200 images identified as rollover images (img1 = new Image(79,29);
img1.src = "images/image1.gif"
without any noticable loss of performance or speed. The main thing is the unique ID's and image names - these are the key to making this script work.