Images

Rollover Images

Contents The Tag Several On One Page

You may also want to check out how to create a rollover submit image for a form

"Rollover images" are images that change when the mouse is over them. Rollover Images (or "rollovers" as we'll call them) are popular because they give the image a live feeling... they indicate that something will happen when you click on it. For example, this rollover, which is inside a link, changes from a gray-scale picture to a color picture when the mouse is over it:

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

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>

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. 

Images

Contents The Rules of ALT Rollover Images Many Links, One Rollover No Borders Around Image Links How to Make an Image Map <IMG ...> Image <MAP ...> <AREA ...> <SPACER ...>

The Rules of ALT

Images made the web cool. Hyperlinking may have made the web efficient and useful but it was the ability to publish pictures of your dog (world wide!) that generated enthusiasm for the web. This section describes the markup for putting images on your page. It includes the basics for <IMG ...> and the not-so-basics, such as LOWSRC.

This section starts with the very important The Rules of ALT which discuss how to use the ALT attribute with your images. Failure to use ALT is the single most common and destructive mistake made in web design.

Rollover Image: The image changes when the mouse is over it.

We then move on the how to create rollover images, a popular special effect in which the image changes when the mouse is over it.