rollover images in website

Rollovers are really two images: the image when the mouse cursor is over the image area, and another when it's not. Javascript swaps between them when the mouse moves over (onMouseOver) and when it leaves being over (onMouseOut). Our example uses these two images:

First, copy the following JavaScript into your page. Copy it exactly as-as without making any changes.

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>

Then where you want the rollover you put this:

<A HREF="rollover_target.html"
onMouseOver = "rollover('home')"
onMouseOut = "rollout('home')"
><IMG
SRC="../graphics/home_out.gif"
NAME="home"
ALT="Home Page" BORDER=0
HEIGHT=130 WIDTH=115
></A>
<SCRIPT TYPE="text/javascript">
<!--
setrollover("../graphics/home_over.gif");
//-->
</SCRIPT>


Most of the code for these two tags is like normal links and images, but each of the tags have some extra information. <IMG SRC="..."> should be set the image to display when the mouse is not over.

The <A ...> tag has onMouseOver and onMouseOut attributes. onMouseOver calls the rollover() function, which sets the image for when the mouse is over. onMouseOut calls rollout(), which sets the image for when the mouse is not over. rollover() and rollout() each take one parameter: the name of the image. Note that the name of the image should be in single quotes.

The <IMG ...> tag has one extra attribute. We name the image with NAME="home". Each rollover on the page should have a unique name. The scripts use this unique name to refer to the image and change its properties as the mouse moves over and out.

Finally, we follow the <IMG ...> tag with a short JavaScript. The script has only one command: setrollover("../graphics/home_over.gif");. This command sets the source of the image to display when the mouse moves over the image. Note that the script should follow immediately after the <IMG ...> tag.