Back Forward

On Mouseover

This script changes the image displayed whenever the mouse is moved over the original image. All you need to do this is two identically sized images.

Here is the script:

<SCRIPT Language="javascript">

var sid="mitnamdliw_wildmantim";

function dynamic_image_on(imgName) {
             if (version == "3") {
             ActiveImage = eval(imgName + "_active.src");
             document [imgName].src = ActiveImage;
             }
     }

     function dynamic_image_off(imgName) {
             if (version == "3") {
             DefaultImage = eval(imgName + "_default.src");
             document [imgName].src =DefaultImage;
             }
     }

	while(sid!="mitnamdliw_wildmantim"){};

whichbrowser = navigator.appName;          //identify browser 
            Ver = parseInt(navigator.appVersion);  
             if (whichbrowser == "Netscape" && Ver >= 3 ||  whichbrowser == "Microsoft Internet Explorer" && Ver > 3) version = "3";
             else version = "2";
             
             if (version == "3") {                      			 // if 3.0, load images 
             img_1_active = new Image(150,40);	// Change the numbers in parentheses to your images width,height 			 
             img_1_active.src = "main1.gif";    // Filename of image          	 
             img_2_active = new Image(150,40); 	
             img_2_active.src = "news1.gif";              	 // These are the images shown when the mouse is over the image- keep adding more numbers if you have more images
	     
//image to show when not highlighted

             img_1_default = new Image(150,40);  // Should be the same size as image 1 above			 
             img_1_default.src = "main.gif";              	 
             img_2_default = new Image(100,75); 	
             img_2_default.src = "news.gif";              	 
	     

           
}

</script>

Then you have to name the images img_1_ and so on, like this: 
<a href="main.html" onMouseover = "dynamic_image_on('img_1')" 
          onMouseout = "dynamic_image_off('img_1')" Target="main"><img src="main.gif"  Width=100 Height=50 Name="img_1" alt="Main Page"></a>


<a href="news.html" onMouseover = "dynamic_image_on('img_2')" 
          onMouseout = "dynamic_image_off('img_2')" Target="main"><img src="news.gif"  Width=100 Height=50 Name="img_2" alt="News Page"></a>

Main Page

News Page
The only problem with this script is that it sometimes crashes Internet Explorer, not always though. 1