Idocs Guide to HTML

Rollover Images: The Tag

Now we add the code which puts the image on the page. The rollover is created with an <A ...> and an <IMG ...> tag:

Code For A Single Rollover Rollover
    onMouseOver = "rollover('home')" 
    onMouseOut  = "rollout('home')" 
    ALT="Home Page" BORDER=0 
    HEIGHT=130 WIDTH=115
<SCRIPT TYPE="text/javascript">
Home Page

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. (If putting the script there looks messy to you, in the next page we'll show you how to load the mouseover images all at once at the top of the page.)

Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.