Chami.com Tips

Animated buttons without Java - thanks to OnMouseOver and OnMouseOut

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: "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: Now, let's look at the HTML code used in our 2nd example animated home button (sample image obtained from Explorer 3.x): 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: 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.