There's loads and loads of people with mouse-over image changing JavaScript out there. They annoyed me endlessly. The problem? As you write your code, you need to specify the images files over and over again, as well as (in some cases) specifying unique routines for each button. Yuck! I wrote this bit so all you need is some code in the header and a single JavaScript line in the text of your document for each button you want with a mouse-over effect.
Just make sure your original image and replacement image have the same display size. Also, if you're naming document elements, avoid the name "MouseoverImageX", where "X" is a number. If you HAVE to use that element name, you can easily change the "MouseoverImage" prefix at the top of the header.
Place the following in the header of your web page (the <head> and </head>
are to show where the code goes in the HTML page). Or use a server-side includes
as mentioned above. In any case, the header code is:
<head>
<script type="text/javascript">
<!--
// This prefix is used to uniquely identify the button images.
// This name should not be used in other code on the page. It
// is defined here so it can be easily modified.
obscureNamePrefix = "MouseoverImage";
// As new mouse-over buttons are introduced, they are loaded in these
// arrays, and indexed in the order seen.
buttonNames = new Array( );
mouseOverImages = new Array( );
mouseOutImages = new Array( );
function ChangeImage( buttonIndex )
{
// Change the button's image to the alternate image.
eval( "document." + buttonNames[ buttonIndex ] + ".src = mouseOverImages[ buttonIndex ].src;" );
}
function ResetImage( buttonIndex )
{
// Reset the button's image to the default image.
eval( "document." + buttonNames[ buttonIndex ] + ".src = mouseOutImages[ buttonIndex ].src;" );
}
function MouseoverImage( link, startImage, mouseOverImage )
{
// What index are we working on?
index = buttonNames.length;
// Define the button name to be the obscure name and the button index.
buttonName = obscureNamePrefix + index;
// Save the button name for later use.
buttonNames.push( buttonName );
// Save the mouse-over image for use.
moImage = new Image();
moImage.src = mouseOverImage;
mouseOverImages.push( moImage );
// Save the original image for use.
sImage = new Image();
sImage.src = startImage;
mouseOutImages.push( sImage );
// Create the HTML that invokes the changing images for this index.
string = new String();
string = "<a href=\"" + link + "\"";
string += " onmouseOver=\"ChangeImage( " +
index + " )\"";
string += " onmouseOut=\"ResetImage( " +
index + " )\">";
string += "<img src=\"" + startImage + "\" name=\"" +
buttonName + "\" >";
// Write the code into the document.
document.write( string );
}
-->
</script>
</head>
Now, to use this code, place a call to MouseoverImage() in your HTML:
<script type="text/javascript">
<!--
MouseoverImage( "index.shtml", "Graphics/StartImage.gif", "Graphics/MouseoverImage.gif" );
-->
</script>
This call will be replaced by the HTML needed to create a link to the page you
specified in the first parameter, with the default image as the second parameter.
As the user moves their mouse over the image, it'll change to the image listed as
the third parameter. Like this: