Rollovers
May 13, 2002
Rollovers are those fancy images that change when the visitor's
mouse rolls over them. They're often used for navigation images.
Some people would say they're often over-used for navigation
images.
Here's a rollover script that comes in two parts. The first bit
goes in the <head> section of your HTML page, traditionally
just before the </head> closing tag.
<SCRIPT language="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source! http://javascript.internet.com -->
<!-- Begin
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>
And here's the second part of the code, the trigger, which goes
inside the main <body> of your page at the exact place where
you want the rollover to appear.
<A HREF="the_page_you_want_to_move_to.html"
onmouseover="movepic('button','pic-on.gif')"
onmouseout="movepic('button','pic-off.gif')">
<IMG NAME="button" SRC="pic-off.gif"></A>
This script needs a little modification before it will work. The
main change you need to make is to replace
"the_page_you_want_to_move_to.html" with the address of
the real HTML file you're linking to. If you name your two
rollover images "pic-on.gif" and "pic-off.gif"
and keep them in the same directory as the HTML file, this script
will now work without further adjustment.
Alternatively you can change the filenames of the images within
the script so they match the filenames and filepaths of the images
you're using.
Often there's more than one rollover on a single page, and this
script can be adapted for multiple rollovers. First, you need to
change the filenames of the images you're using, unless you intend
to use the same ones, which is perfectly feasible. Then you need
to change the reference-name of the rollover itself, because you
can't have two rollovers with the same name on the same page. The
reference name of the first rollover is "button", so we
can call our second rollover "button2". That means
replacing the three references to "button" in the script
with "button2".
We finish up with something like this:
<A HREF="the_page_you_want_to_move_to.html"
onmouseover="movepic('button2','pic2-on.gif')"
onmouseout="movepic('button2','pic2-off.gif')">
<IMG NAME="button2" SRC="pic2-off.gif"></A>
You'll notice that all the changes we've made are to elements of
the trigger code in the main body of the page. None of our changes
altered the main code in the <head> section. Most scripts
operate this way - especially if they're well-written. It's likely
you won't need to change the script in the <head> section,
only the trigger code in the <body>.
File referencing and filepaths work in exactly the same way inside
a script as they do outside it, in regular lines of HTML. There's
no difference. So you can use
http://www.mysitename.com/images/pic-on.gif or /images/pic-on.gif or ../images/pic-on.gif in line with whatever filepath protocol you generally use.
Date Last Modified
JavaScript for Non-Programmers
Pop-up Window
|
