MouseOver Code


OVERVIEW
By placing the following code into your HTML [web document] you can swap images from one to another for a cool effect. One part of this code goes into the top of your document in between the <HEAD></HEAD> tags. The other part of this code will go into your HTML where you want the image to appear.

IN THE <HEAD></HEAD> TAG
You need to copy and paste this text in your HTML below the <HEAD> and before the </HEAD> tags. You will modify it to reflect your specific images, wherever the image names appear:


<SCRIPT LANGUAGE = "JavaScript">
<!-- Hides script from non-compatible browsers


       browserName = navigator.appName;
       browserVer = parseInt(navigator.appVersion);
            /*   if (top.frames.length > 1) {
                        top.location="menu.html";
                        } */

               if (browserName == "Netscape" && browserVer >= 3) version ="n3";
               else {version = "n2"};
               if (navigator.appVersion.substring(0,3) == '4.0') {version="n3"};
               if (version == "n3") {
             

              
               nav1on = new Image;
               nav1on.src = "button1_lit.gif";
             
               nav1off = new Image;
               nav1off.src = "button1.gif";

               nav2on = new Image;
               nav2on.src = "button2_lit.gif";
             
               nav2off = new Image;
               nav2off.src = "button2.gif";

               nav3on = new Image;
               nav3on.src = "button3_lit.gif";
             
               nav3off = new Image;
               nav3off.src = "button3.gif";

               nav4on = new Image;
               nav4on.src = "button4_lit.gif";
             
               nav4off = new Image;
               nav4off.src = "button4.gif";
                                     
            
             }

       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;
               }
       }

// End hide script -->


</script>
 

THE IMAGE REFERENCE
This part is what you put in the HTML where you want the buttons to appear. Make sure that the button name here is the one that is the same as the "off" state in the above text. Also note that the image name attribute refers to the the names in the above script. Here is the text:


<A HREF="mylink.html" onMouseover = "img_act('nav1')" onMouseout = "img_inact('nav1')"><img src="button1.gif" border=0 name="nav1"></a> 

<A HREF="mylink.html" onMouseover = "img_act('nav2')" onMouseout = "img_inact('nav2')"><img src="button2.gif" border=0 name="nav2"></a>

<A HREF="mylink.html" onMouseover = "img_act('nav3')" onMouseout = "img_inact('nav3')"><img src="button3.gif" border=0 name="nav3"></a>