Designing with JavaScript CD Code

<HTML>
<HEAD>
<TITLE>Teach An Old Dog New Tricks: Image Rollovers</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--

// Detect if browser is Netscape 3 + or IE 4 +.
bName = navigator.appName;
bVer = parseInt(navigator.appVersion);
    if ((bName == "Netscape" && bVer >= 3) || 
        (bName == "Microsoft Internet Explorer" && bVer >= 4)) br = "n3"; 
    else br = "n2";

// Create image objects, preload all active and inactive images.
    if (br== "n3") { 
    img1on = new Image();          // Create four image objects for the 
    img1on.src = "catalogon.gif";  // active images; the images displayed
    img2on = new Image();          // when the mouse moves over the 
    img2on.src = "galleryon.gif";  // rollovers.
    img3on = new Image();
    img3on.src = "authoron.gif";
    img4on = new Image();
    img4on.src = "mailon.gif";

    img1off = new Image();          // Create four image objects for the 
    img1off.src = "catalogoff.gif"; // inactive images; the images 
    img2off = new Image();          // displayed when the mouse moves off
    img2off.src = "galleryoff.gif"; // the rollovers.
    img3off = new Image();
    img3off.src = "authoroff.gif";
    img4off = new Image();
    img4off.src = "mailoff.gif";
    }

// Function to "activate" images.
function imgAct(imgName) {
    if (br == "n3") {
    document[imgName].src = eval(imgName + "on.src");
    }
}

// Function to "deactivate" images.
function imgInact(imgName) {
    if (br == "n3") {
    document[imgName].src = eval(imgName + "off.src");
    }
}

// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#FFFFFF">

<A HREF = "catalog.html" 
 onMouseOver = "imgAct('img1')" 
 onMouseOut = "imgInact('img1')">
<IMG NAME= "img1" BORDER = 0 HEIGHT = 71 WIDTH = 500 SRC = "catalogoff.gif"></A>

<A HREF = "gallery.html" 
 onMouseOver = "imgAct('img2')" 
 onMouseOut = "imgInact('img2')">
<IMG NAME= "img2" BORDER = 0 HEIGHT = 71 WIDTH = 500 SRC = "galleryoff.gif"></A>

<A HREF = "author.html" 
 onMouseOver = "imgAct('img3')" 
 onMouseOut = "imgInact('img3')">
<IMG NAME= "img3" BORDER = 0 HEIGHT = 71 WIDTH = 500 SRC = "authoroff.gif"></A>

<A HREF = "mail.html" 
 onMouseOver = "imgAct('img4')" 
 onMouseOut = "imgInact('img4')">
<IMG NAME= "img4" BORDER = 0 HEIGHT = 71 WIDTH = 500 SRC = "mailoff.gif"></A>

</BODY>
</HTML>