Click Here for FREE Web Hosting!

Home >> Images

The Rules of ALT

Rollover Images: The Tag

Rollover Images

Rollovers are really two images: the image when the mouse is over, 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:

home_out.gif Image When The Mouse Is Not Over	home_over.gif Image When The Mouse Is Over

<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>

This script does most of the work for you. In the next page we'll create the code that implements the scripts for a single rollover image.

The Rules of ALT

Rollover Images: The Tag