Click Here for FREE Web Hosting!

Home >> Images >> Rollover Images

Rollover Images: The Tag

Many Links, One Rollover

Rollover Images: Several On One Page

<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>

Rollover Images: The Tag

Many Links, One Rollover