|
This version of the Mouseover script is suitable for multiple images. Again,
position your mouse pointer over any image below to see a different image,
and then move the pointer off the image to restore it. As usual, you must have
Netscape 3.0 or higher or Internet Explorer 4.0 for this to work.
One caveat before continuing: This technique means that you download twice
the number of images each time, so your page will load slower. This is why I no
longer use this technique on my own pages.
<SCRIPT LANGUAGE = "JavaScript">
<!--
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if ((browserName == "Netscape" && browserVer >= 3) || (browserName == "Microsoft Internet Explorer" && browserVer >=4))
browserOK = "yes";
else
browserOK = "no";
if (browserOK == "yes") {
booksOn = new Image(43, 97);
booksOn.src = "/Graphics/Interface/green/tbbooks-on.gif";
booksOff = new Image(43, 97);
booksOff.src = "/Graphics/Interface/green/tbbooks.gif";
toysOn = new Image(43, 97);
toysOn.src = "/Graphics/Interface/green/tbtoys-on.gif";
toysOff = new Image(43, 97);
toysOff.src = "/Graphics/Interface/green/tbtoys.gif";
logophiliaOn = new Image(43, 97);
logophiliaOn.src = "/Graphics/Interface/green/tblogoph-on.gif";
logophiliaOff = new Image(43, 97);
logophiliaOff.src = "/Graphics/Interface/green/tblogoph.gif";
ramblingsOn = new Image(43, 97);
ramblingsOn.src = "/Graphics/Interface/green/tbramblings-on.gif";
ramblingsOff = new Image(43, 97);
ramblingsOff.src = "/Graphics/Interface/green/tbramblings.gif";
newOn = new Image(43, 97);
newOn.src = "/Graphics/Interface/green/tbnew-on.gif";
newOff = new Image(43, 97);
newOff.src = "/Graphics/Interface/green/tbnew.gif";
searchOn = new Image(43, 97);
searchOn.src = "/Graphics/Interface/green/tbsearch-on.gif";
searchOff = new Image(43, 97);
searchOff.src = "/Graphics/Interface/green/tbsearch.gif";
guestbOn = new Image(43, 97);
guestbOn.src = "/Graphics/Interface/green/tbguestb-on.gif";
guestbOff = new Image(43, 97);
guestbOff.src = "/Graphics/Interface/green/tbguestb.gif";
homeOn = new Image(43, 97);
homeOn.src = "/Graphics/Interface/green/tbhome-on.gif";
homeOff = new Image(43, 97);
homeOff.src = "/Graphics/Interface/green/tbhome.gif";
}
function imageOn(imgName) {
if (browserOK == "yes") {
imgOn = eval(imgName + "On.src");
document[imgName].src = imgOn;
}
}
function imageOff(imgName) {
if (browserOK == "yes") {
imgOff = eval(imgName + "Off.src");
document[imgName].src = imgOff;
}
}
//-->
</SCRIPT>
This is a much more complicated program, so here's a quick explanation of how this thing works:
First of all, you use the new Image statement to create variables to hold
each of your images. You then assign the appropriate GIF or JPEG to be the source
for that variable. For example, the "on" image for my BOOKS graphic would be set up
as follows:
booksOn = new Image(43, 97);
booksOn.src = "/Graphics/Interface/green/tbbooks-on.gif";
Notice that you specify the image height and width in the Image function.
Similarly, the "off" image is set up like so:
booksOff = new Image(43, 97);
booksOff.src = "/Graphics/Interface/green/tbbooks.gif";
All of these statements are in a SCRIPT section at the top of the page, so all the
images are downloaded to the user when they display your page.
It's important to note that these variable names are not arbitrary. The format is as
follows: the name of the image (that is, the NAME attribute you assign in the IMG tag)
followed by either "On" or "Off". If you have an image named "home", for example,
then your variables must be named homeOn and homeOff.
Once you've done all that, you need to adjust your A tag. Specifically, my JavaScript
has two functions—named imageOn and imageOff—
that serve as general purpose routines for turning any of your images on and off
according to the mouse position. So you must call the imageOn function in
the onMouseover event and the imageOff function in the
onMouseout event. In each case, you send the name of the image to the
function. Here's the BOOKS example:
A HREF="/Books/" onMouseover="imageOn('books')" onMouseout="imageOff('books')"
Although this example is complex, to implement it on your own sites requires only the
following four steps:
- Copy everything between and including the SCRIPT and /SCRIPT tags and insert
it on your page between the /HEAD and BODY tags.
- Adjust the variable names to correspond with the names used in your IMG tags.
- Adjust the height and width in each of the Image functions.
- Change the onMouseover and onMouseout attributes to call
the imageOn and imageOff functions.
|
Paul McFedries' Web Home