JavaScript Tip of the Week for Sept. 30, 1996: Dynamic Images and Menus | Source Code | WebReference

JavaScript Tip of the Week for Sept. 30, 1996: Dynamic Images and Menus | Source Code

JavaScript Tip of the Weekfor September 30, 1996: Source Code: Dynamic Images and Menus

Put this code in the head of the page for the Dynamic Images Menu:

/* This code is Copyright (c) 1996 Nick Heinle and Athenia Associates, 
 * all rights reserved. In order to receive the right to license this 
 * code for use on your site the original code must be copied from the
 * Web site webreference.com/javascript/. License is granted to user to 
 * reuse this code on their own Web site if and only if this entire copyright
 * notice is included. Code written by Nick Heinle of webreference.com.
 */
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
        if (browserName == "Netscape" && browserVer >= 3) version = "n3";
        else version = "n2";
        
        if (version == "n3") {
        toc1on = new Image();
        toc1on.src = "../toc1on.gif";
        toc2on = new Image();
        toc2on.src = "../toc2on.gif";
        toc3on = new Image();
        toc3on.src = "../toc3on.gif";
        toc4on = new Image();
        toc4on.src = "../toc4on.gif";
        toc5on = new Image();
        toc5on.src = "../toc5on.gif";
        toc1off = new Image();
        toc1off.src = "../toc1off.gif";
        toc2off = new Image();
        toc2off.src = "../toc2off.gif";
        toc3off = new Image();
        toc3off.src = "../toc3off.gif";
        toc4off = new Image();
        toc4off.src = "../toc4off.gif";
        toc5off = new Image();
        }
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;
        }
}
toc5off.src = "../toc5off.gif";


Put this HTML where you want the menu to be displayed:

<TABLE BORDER = 0 CELLPADDING = 0 CELLSPACING = 0>
<TR><TD>
<IMG BORDER = 0 
 HEIGHT = 31 WIDTH = 197
 SRC = "../toctop.gif" ALT = "Table of Contents">
</TD></TR><TR><TD>
<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>
</TD></TR><TR><TD>
<A HREF = "../tip_week_past.html" 
 onMouseover = "img_act('toc2')" 
 onMouseout = "img_inact('toc2')">
<IMG BORDER = 0 NAME = "toc2" 
 HEIGHT = 42 WIDTH = 197 
 SRC = "../toc2off.gif" ALT = "Tip Repository"></A>
</TD></TR><TR><TD>
<A HREF = "../thehut/index.html" 
 onMouseover = "img_act('toc3')" 
 onMouseout = "img_inact('toc3')">
<IMG BORDER = 0 NAME = "toc3" 
 HEIGHT = 42 WIDTH = 197 
 SRC = "../toc3off.gif" ALT = "The Hut"></A>
</TD></TR><TR><TD>
<A HREF = "../guide/index.html" 
 onMouseover = "img_act('toc4')" 
 onMouseout = "img_inact('toc4')">
<IMG BORDER = 0 NAME = "toc4" 
 HEIGHT = 42 WIDTH = 197 
 SRC = "../toc4off.gif" ALT = "Beginner's Guide"></A>
</TD></TR><TR><TD>
<A HREF = "../e-mail.html" 
 onMouseover = "img_act('toc5')"
 onMouseout = "img_inact('toc5')">
<IMG BORDER = 0 NAME = "toc5"
  HEIGHT = 42 WIDTH = 197 
 SRC = "../toc5off.gif" ALT = "E-mail"></A>
</TD></TR>
</TABLE>