JavaScript Tip of the Week for September 30, 1996: Dynamic Images and Menus | WebReference

JavaScript Tip of the Week for September 30, 1996: Dynamic Images and Menus

JavaScript Tip of the Weekfor 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.
Table of Contents
This Week
Tip Repository
The Hut
Beginner's Guide
How does this work? When somebody moves their mouse over one of the menu's images, the script changes that image to one that is highlighted. When the mouse is moved off the image the image is changed back. This eye catching effect only works in Netscape 3.0. So what happens if somebody with Netscape 2.0 or IE comes by? No problem, this particular script will ignore all other browsers less than Netscape 3.0. The first step in creating this type of menu is to define and preload all of the images you will be using:
    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.