Buy online at www.borders.com

It's Not Just Help. . .

So How Does It Work?

HTML Topics & Templates
CSS
DHTML
Project File (.hhp)

Contents File (.hhc)

Merging Modular Files

Accelerating Links

Distribution & Installation



HTML Help Resources on the Web


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

 

buttonName

is a variable used to access the name property of the graphic or other element modified by the functions.

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.