Really Cool Java Script Hover Buttons

First here's the result of this script. Pretty cool eh?

Here's how it's done:

We start out with normal <HTML>, <HEAD, and <TITLE> </TITLE> tags.

<HTML>
<HEAD>
<TITLE>Java Script Hover Button</TITLE>

Here we tell the browser that there is going to be some JavaScript.

<SCRIPT language="JavaScript">

The <!-- is read as "comments follow" by old browsers.

<!--hide

Browser check
"browserName" gets the name of the browser and "browserVer" gets the version #.

browserName=navigator.appName;
browserVer=parseInt(navigator.appVersion);

This "if" statement sets the variable "version" to "n3" if the browser is Netscape 3 or above, or if it's MS Explorer 4 or above.

if ((browserName=="Netscape" && browserVer>=3) || (browserName=="Microsoft Internet Explorer" && browserVer>=4))
version="n3";
else
version="n2";

If this is a newer browser then "pic1on" is defined as a new image with a width of 35 and a height of 35. It is then assigned a URL of where the image can be found. The same is true of "pic1off". "pic1off" is the normally displayed image and "pic1on" is the image displayed when the mouse is over it.

if (version=="n3")
  {
  pic1on= new Image(35,35);
  pic1on.src="greenon.gif";
  pic1off= new Image(35,35);
  pic1off.src="greenon.gif";
  }

The function that lights up the button. This function recieves the the name "pic1" from the HTML code onMouseover. This function then tacks on "on.src" to make "pic1on.src". The URL of the image in this document called pic1 is then set to = "pic1on.src".

function lightup(imgName)
  {
  if (version=="n3")
   {
   imgon=eval(imgName + "on.src");
   document[imgName].src= imgon;
   }
  }

The function that turns the light off. This function recieves the the name "pic1" from the HTML code onMouseout. This function then tacks on "off.src" to make "pic1off.src". The URL of the image in this document called pic1 is then set to = "pic1off.src".

function turnoff(imgName)
  {
  if (version=="n3")
   {
   imgoff=eval(imgName + "off.src");
   document[imgName].src= imgoff;
   }
  }

The closing tag for the remarks tag at the top of the JavaScript.

//-->

The closing tag for the JavaScript.

</SCRIPT>

The closing tag for the &HEAD> tag

</HEAD>

The start of the Body of the document

<BODY>

At last, the HTML code for the Mouse actions
The opening Anchor tag contains the onMouseover and the onMouseout commands. The closing Anchor tag is on the other side of the IMG tag. This means that the mouse action commands apply for the image between the opening and closing anchor tags, i.e. the image named "pic1". The HREF="a location" is the URL of what ever document that you want called up when the button is pushed.

<A HREF="jhover.htm" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<IMG SRC="greenoff.gif" name="pic1" width="35" height="35" border="0"></A>

Closeing BODY and HTML tags

</BODY>
</HTML>



Retrun to JavaScript Index   Retrun to Home Page