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.
InMotion Web Hosting Customer Support
M-F 8am - 7pm PST
213-239-0050
More information can be found at the
InMotion Hosting Main Site |
|
|
