Image Rollover Recipe

Purpose

This recipe changes the image that is displayed whenever the user’s mouse moves over the image.

Sample

Move your mouse over the image below to see it change dynamically.

 

Preparation

The files for the two states of the image should be named x.gif and xDown.gif, where x can be anything you like.

Function

<SCRIPT LANGUAGE="JavaScript">
function buttonDown(buttonName)
{
document.images[buttonName].src=buttonName + "Down.gif";
}
function buttonUp(buttonName)
{
document.images[buttonName].src=buttonName + ".gif";
}
</SCRIPT>

where

Call within the element

<IMG NAME="button1" SRC="button1.gif" onMouseOver="buttonDown(this.name)" onMouseOut="buttonUp(this.name)">

Possible modifications

This recipe can be applied to text as well as graphics, if the call to the functions are placed within the text element’s tag (such as <P> or <H1>) or if the text is enclosed in <SPAN> tags.