HTML Tutorials: Rollover Images: The Tag

Code For A Single Rollover

Rollover


<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. (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.)

Recommended Resources

web hosting tutorials
Credit Help

Search the Internet
Search Engine Help

Low Fat Lifestyle
Internet Traffic

Web Hosting
Web Design

Discount Hotel Reservations

Search The Internet

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. About the author