Rollover Images: Several On One Page

The rollover technique from the previous pages works for as many images on a single page as you want. All you have to do is use a different name for each image. For example, suppose you have three different button images which should all be rollovers. You could create them using the following markup:

<A 
 HREF="home_ro.html"
 onMouseOver = "rollover('home')"
 onMouseOut = "rollout('home')"
 ><IMG 
 SRC="home.out.gif"
NAME="home"
 HEIGHT=37 WIDTH=87 BORDER=0 ALT="home"
 ></A>
<SCRIPT TYPE="text/javascript">
<!--
setrollover('home.over.gif');
//-->
</SCRIPT>
<A 
 HREF="resume_ro.html"
 onMouseOver = "rollover('Resume')"
 onMouseOut = "rollout('Resume')"
 ><IMG 
 SRC="resume.out.gif"
NAME="Resume"
 HEIGHT=37 WIDTH=87 BORDER=0 ALT="Resume"
 ></A>
<SCRIPT TYPE="text/javascript">
<!--
setrollover('Resume.over.gif');
//-->
</SCRIPT>
<A 
 HREF="specs_ro.html"
 onMouseOver = "rollover('specs')"
 onMouseOut = "rollout('specs')"
 ><IMG 
 SRC="specs.out.gif"
NAME="specs"
 HEIGHT=37 WIDTH=87 BORDER=0 ALT="specs"
 ></A>
<SCRIPT TYPE="text/javascript">
<!--
setrollover('specs.over.gif');
//-->
</SCRIPT>

This creates these buttons:

This example highlights one of the advantages to this particular rollover technique: it keeps all the information about each rollover in one place. It's easier to organize the information about the image and the link when you have all of it together, rather than spread across several parts of the page. However, following each image with a script creates some lengthy code, and some people find this code messy. If you prefer, you can list all the mouseover information at the beginning of the page. Just add the name of the image as the second parameter to the setrollover() command:

<SCRIPT TYPE="text/javascript">
<!--
setrollover('home.over.gif', 'home');
setrollover('Resume.over.gif', 'Resume');
setrollover('specs.over.gif', 'specs');
//-->
</SCRIPT>

Then create the images as before, but don't bother following each image with a script:

<A 
 HREF="home_ro.html"
 onMouseOver = "rollover('home')"
 onMouseOut = "rollout('home')"
 ><IMG 
 SRC="home.out.gif"
 NAME="home"
 HEIGHT=37 WIDTH=87 BORDER=0 ALT="home"
 ></A>
<A 
 HREF="resume_ro.html"
 onMouseOver = "rollover('Resume')"
 onMouseOut = "rollout('Resume')"
 ><IMG 
 SRC="resume.out.gif"
 NAME="Resume"
 HEIGHT=37 WIDTH=87 BORDER=0 ALT="Resume"
 ></A>
<A 
 HREF="specs_ro.html"
 onMouseOver = "rollover('specs')"
 onMouseOut = "rollout('specs')"
 ><IMG 
 SRC="specs.out.gif"
 NAME="specs"
 HEIGHT=37 WIDTH=87 BORDER=0 ALT="specs"
 ></A>

Many Links, One Rollover >>>