Animated Navigation Buttons

This page explains how to create the sort of buttons as shown below which change when the mouse is moved over them. This technique works in IE4+ & Netscape 3+. You can download an Animated Buttons Example (5kb) if you want.

First you will need to create two sets of buttons, one set for when the mouse is over the button and one set for when the mouse is not.

'On' Buttons	'Off' Buttons

You then need to stick some as shown below code between the <HEAD> and </HEAD> parts of the page.

<SCRIPT LANGUAGE="JavaScript">
<!--
version="0";
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
   version="n3";
if (browserName == "Microsoft Internet Explorer" && browserVer >= 3)
   version="n3";
if (version == "n3")
{
   advancedon = new Image(101,11);
   advancedon.src = "advancedon.gif";
   advancedoff = new Image(101,11);
   advancedoff.src = "advancedoff.gif";
   frameson = new Image(101,11);
   frameson.src = "frameson.gif";
   framesoff = new Image(101,11);
   framesoff.src = "framesoff.gif";
   tableson = new Image(101,11);
   tableson.src = "tableson.gif";

   tablesoff = new Image(101,11);
   tablesoff.src = "tablesoff.gif";
   javaon = new Image(101,11);
   javaon.src = "javaon.gif";
   javaoff = new Image(101,11);
   javaoff.src = "javaoff.gif";
}

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

function img_Off(imgName)
{
  if (version == "n3")
  {
    imgOff = eval(imgName + "off.src");
    document [imgName].src = imgOff;
  }
}
// -->
</SCRIPT>

You obviously need to change the picture names to suit your pictures and also alter the sizes. The extract below loads the on & off images for my Advanced HTML page. The are both 101 pixels wide and 11 pixels high.

   advancedon = new Image(101,11);
   advancedon.src = "advancedon.gif";
   advancedoff = new Image(101,11);
   advancedoff.src = "advancedoff.gif";

You then need to stick the pictures into your page and add a little extra code to swap the images as shown below.

<A HREF="advancedhtml.htm"
   ONMOUSEOVER="img_On('advanced')"
   ONMOUSEOUT="img_Off('advanced')">

   <IMG SRC="advancedoff.gif" NAME="advanced"
     WIDTH="101" HEIGHT="11" BORDER="0" ALT="Advanced HTML">
</A>

<A HREF="frame.htm"
   ONMOUSEOVER="img_On('frames')"
   ONMOUSEOUT="img_Off('frames')">

   <IMG SRC="framesoff.gif" NAME="frames"
     WIDTH="101" HEIGHT="11" BORDER="0" ALT="Frames Guide">
</A>

<A HREF="tables.htm"
   ONMOUSEOVER="img_On('tables')"
   ONMOUSEOUT="img_Off('tables')">

   <IMG SRC="tablesoff.gif" NAME="tables"
     WIDTH="101" HEIGHT="11" BORDER="0" ALT="Tables Guide">
</A>

<A HREF="javamenu.htm"
   ONMOUSEOVER="img_On('java')"
   ONMOUSEOUT="img_Off('java')">

   <IMG SRC="javaoff.gif" NAME="java"
     WIDTH="101" HEIGHT="11" BORDER="0" ALT="Java Menu">
</A>

Each image has an ONMOUSEOVER which shows the 'On' image when the mouse is over it and an ONMOUSEOUT bit which changes the image back to the 'off' one when the mouse moves away from it. Note also that each image must be given an appropriate name which must be the image name minus the on.gif or off.gif part.

The

Advanced

HTML

Site

Animated Navigation Buttons

'On' Buttons

'Off' Buttons