onMouseOver Image Effects

These buttons change when you run your cursor over them. (Netscape & Internet Explorer 4.0 only.)
If you are new to Javascript then please read my onMouseOver Image Effects Tutorial for a more in depth explanation of how to create these effects :)

You need two images for each button - one for the onMouseOver state and one for the onMouseOut state.

Insert this code in the <head></head> tags of your page:

browserName = navigator.appName;   // detect browser 
         browserVer = parseInt(navigator.appVersion);
             if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
             else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
             else browserVer = "2";

//preload images - insert the names and sizes of your images here:
if (browserVer == 1) {
a1 = new Image(118,46);
a1.src = "a1.jpg";
a2 = new Image(118,46);
a2.src = "a2.jpg";
b1 = new Image(118,46);
b1.src = "b1.jpg";
b2 = new Image(118,46);
b2.src = "b2.jpg";
c1 = new Image(118,46);
c1.src = "c1.jpg";
c2 = new Image(118,46);
c2.src = "c2.jpg";
d1 = new Image(118,46);
d1.src = "d1.jpg";
d2 = new Image(118,46);
d2.src = "d2.jpg";
e1 = new Image(118,46);
e1.src = "e1.jpg";
e2 = new Image(118,46);
e2.src = "e2.jpg";
}

function hiLite(imgDocID,imgObjName) {
if (browserVer == 1) {
	document.images[imgDocID].src = eval(imgObjName + ".src")
}}

//end hiding -->
</script>

Insert this code where you want the buttons to appear: