|
|
for September 30, 1996: Dynamic Images and Menus
Dynamic images and menus go together well. I'm sure you've seen examples of them together before: Take a look at Netscape's Destinations page, it has a menu that becomes highlighted and then displays a related image when you move the mouse over it. I've gotten a lot of questions concerning how this it done and the best ways to do it; this week I'll show you how. When you move your mouse over a choice in the menu below, it becomes highlighted.
browserName = navigator.appName; // detect browser
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version = "n3";
else version = "n2";
if (version == "n3") { // if Netscape 3, then preload images
toc1on = new Image(); // preload five images activated
toc1on.src = "/toc1on.gif"; // when mouse moves over menu
toc2on = new Image();
toc2on.src = "/toc2on.gif";
toc3on = new Image();
toc3on.src = "/toc3on.gif";
toc4on = new Image();
toc4on.src = "/toc4on.gifv";
toc5on = new Image();
toc5on.src = "/toc5on.gif";
toc1off = new Image(); // preload five images activated
toc1off.src = "/toc1off.gif"; // when mouse moves off menu
toc2off = new Image();
toc2off.src = "/toc2off.gif";
toc3off = new Image();
toc3off.src = "/toc3off.gif";
toc4off = new Image();
toc4off.src = "/toc4off.gif";
toc5off = new Image();
toc5off.src = "/toc5off.gif";
}
After determining if the browser is Netscape 3.0 or greater, the images are preloaded [see Image Object]. The first set of preloaded images are displayed when the mouse is moved over a given an image in the menu. These image objects are all named toc1on and toc2on, etc. The image files that go with them are also named similiarly; "toc1on.gif", "toc2on.gif". The second set of image objects, starting with toc1off, are displayed when the mouse is moved off the image. This second set of images should be the same as the original images. The names of all these images and their respective image objects can be left unchanged unless you want to add more images. Say you want six images in the menu instead of five, just add this code:
toc6on = new Image();
toc6on.src = "/toc6on.gif";
toc6off = new Image();
toc6off.src = "/toc6off.gif";
Where "toc6off.gif" and "toc6on.gif" are the names of your inactive and active image files respectively.
After you've preloaded all these images, you've got to create the images and their links on the page:
<A HREF = "../this_week/index.html"
onMouseover = "img_act('toc1')"
onMouseout = "img_inact('toc1')">
<IMG BORDER = 0 NAME = "toc1"
HEIGHT = 42 WIDTH = 197
SRC = "../toc1off.gif" ALT = "This Week"></A>
This would be the first image in the menu, "This Week", because it's name is toc1. I need four more of these to complete the menu, each named "toc2", "toc3", etc. When the mouse is moved over the image, the function img_act() is run. This function, which we will get to shortly, takes the name of the image that you pass it, toc1, and uses that information to change the image. When the mouse is moved off, the function img_inact is run.
function img_act(imgName) {
if (version == "n3") {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
}
function img_inact(imgName) {
if (version == "n3") {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
The first function, img_act() displays the highlighed or 'active' menu image. All you need to do is pass it the image name in the event handler (onMouseover) and it will automatically know which image to change. The same rules apply to img_inact(). I hope this helps those of you who have been wondering how to do this trick.
|
| ||||||||||||||||||||
