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

<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">  </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.)