Qian Liang --- Web Design Tips

1.Changing images when people mouse over them is a cool stuff on a web page. Do you know how to do that? Here is the code you may use. :)
Unfortunately, this script doesn't work on IE3 and Netscape < v3. :(

<SCRIPT language="JavaScript">
<!--
// hide contents
browserName = navigator.appName;
browserVer  = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version = "n3";
else version = "msie";
if (version == "n3")
 {

  menu1on = new Image(50,50); menu1on.src="imagea2.gif";
  menu1off = new Image(50,50); menu1off.src="imagea.gif";

  menu2on = new Image(50,50); menu2on.src="imageb2.gif";
  menu2off = new Image(50,50); menu2off.src="imageb.gif";

  menu3on = new Image(50,50); menu3on.src="imagec2.gif";
  menu3off = new Image(50,50); menu3off.src="imagec.gif";

  menu4on = new Image(50,50); menu4on.src="imaged2.gif";
  menu4off = new Image(50,50); menu4off.src="imaged.gif";

  menu7on = new Image(50,50); menu7on.src="IMAGE_ON.gif";
  menu7off = new Image(50,50); menu7off.src="IMAGE_OFF.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;  
  } 
}
// --></script>

Instructions: Put this script inside your <HEAD>. Change the image names imagea, imageb,... to your front image names, and imagea2, imageb2,... to your rear image names. Inside your <BODY>, please write your code like the following <A HREF="a.htm" onMouseOver="img_act('menu1')" onMouseOut="img_inact('menu1')"> <Img src="imagea.gif" Name="menu1" ......> </A>. Once you complete your work, you should have something similar to this