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>

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.