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
onMouseOver = "rollover('home')"
onMouseOut = "rollout('home')"
ALT="Home Page" BORDER=0
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.
<A ...> tag has
onMouseOver calls the
rollover() function, which sets the image for when the mouse is over.
rollout(), which sets the image for when the mouse is not over.
rollout() each take one parameter: the name of the image. Note that the name of the image should be in single quotes.
<IMG ...> tag has one extra attribute. We name the image
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
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.)