Animated buttons without Java - thanks to OnMouseOver and OnMouseOut

[charleychacko]

If you're using Navigator 3.x, Explorer 4.x or higher (or compatible browser), try slowly moving your mouse over the following image blocks:

 


If you have JavaScript enabled, you'll notice how above blocks change colors when you move your mouse over them. Using the same technique, you can create "animated" buttons as in the following example:

 


We're taking advantage of the fact that you can change the source of an image using JavaScript, which in turn would change the image itself, by using the following syntax:

<SCRIPT language="JavaScript" TYPE="text/javascript">
document.images[ <image#> ].src = "your_img.gif";
</SCRIPT>
Listing #1 : JavaScript code. Download chimg.htm (0.22 KB). You are not allowed to view links. Register or Login

"image#" is the image ID that you want to change. For example, if you have 3 images on your page you can use 2 as the image ID to change the 3rd image on your page. Image IDs start at 0, which means your first image ID is 0, second is 1 and the third is 2.

In our animated button example, we're using "OnMouseOver" and "OnMouseOut" JavaScript events to change the images. Let's look at the complete JavaScript code used to create above examples. Note that following code block must be inserted onto your page if you wish to animate your buttons as explained in this document:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

//
// variables required for our purposes
//
nImg1ID = 0
nImg2ID = 0
nImg3ID = 0
bCalled = 0

//
// we require a Netscape 3.x or compatible
// determine this by checking for agent IDs:
//   Mozilla/3 or Mozilla/4
//
bCompatibleBrowser =
(
  (navigator.userAgent.indexOf("a/3",6)
   >= 0) ||
  (navigator.userAgent.indexOf("a/4",6)
   >= 0)
);

//
// this function was created to make things
// compatible in the old days. if you're
// using Netscape 4.x, Explorer 4.x or higher
// there are easier ways to get image IDs
// such as using the image name
//
function FindImageIDs()
{
  //
  // skip if we've already done this
  //
  if( bCalled )
  {
    return;
  }

  if( bCompatibleBrowser )
  {
    //
    // find the index of our images
    // -- blue and green blocks --
    // by going through all the image
    // src names up to this point
    //
    for( i = 0;
         i < document.images.length;
         i++ )
    {
      if( document.images[ i ].src.indexOf(
          "/i/tips/32x32blue.gif" ) >= 0)
      {
        nImg1ID = i;
      }
      else
      if( document.images[ i ].src.indexOf(
          "/i/tips/32x32green.gif" ) >= 0)
      {
        nImg2ID = i;
      }
      else
      if( document.images[ i ].src.indexOf(
          "/i/tips/home1a.gif" ) >= 0)
      {
        nImg3ID = i;
      }
    }
  }

  //
  // note that our job is done
  //
  bCalled = 1;
}


//
// change the source of a given
// image using its image ID
//
function ChangeImage( nImgID, sImgSrc )
{
  if( bCompatibleBrowser )
  {
    if(document.images)
    {
      document.images[ nImgID ].src
        = sImgSrc;
    }
  }
}

</SCRIPT>
Listing #2 : JavaScript code. Download chimg2.htm (0.84 KB). You are not allowed to view links. Register or Login

Now, let's look at the HTML code used in our 2nd example animated home button (sample image obtained from Explorer 3.x):

<a onMouseOver =
   "FindImageIDs();
    ChangeImage( nImg3ID,
    '/i/tips/home1b.gif' );
    return true"

   onMouseOut  =
   "FindImageIDs();
    ChangeImage( nImg3ID,
    '/i/tips/home1a.gif' );
    return true"
><img
   src = "/i/tips/home1a.gif"
   border=0 width=50 height=40
></a>
Listing #3 : HTML code. Download anibtn (0.28 KB). You are not allowed to view links. Register or Login

By calling "FindImageIDs()" function, we first find out the image ID (or the index) of our animated button's image -- "home1a.gif" Then we simply call "ChangeImage()" function to change "home1a.gif" to the image we want to replace it with. If the mouse is over our image, then we change it to "home1b.gif". If the mouse is outside the image boundary, we change it back to "home1a.gif"

Of course, we didn't have to use "FindImageIDs()" function to get image IDs; we could have manually counted images on the page. For example, if you know the ID of the image that you want to animate, let's say it's 1 (the 2nd image on your page), you could use the follwoing code instead:

<a onMouseOver =
   "ChangeImage( 1,
    '/i/tips/home1b.gif' );
    return true"

   onMouseOut  =
   "ChangeImage( 1,
    '/i/tips/home1a.gif' );
    return true"
><img
   src = "/i/tips/home1a.gif"
   border=0 width=50 height=40
></a>
Listing #4 : HTML code. Download anibtn2 (0.27 KB). You are not allowed to view links. Register or Login

Using "FindImageIDs()" function insures that our image IDs will stay correct even if we change the placement of images on the page, which in turn would change the image IDs.