|
 Shells Starting at $4.99
| Animated buttons without Java -- thanks to OnMouseOver and
OnMouseOut |
|
If you're using Navigator 3.x or
higher (or compatible browser), try slowly moving your mouse over the following image
blocks:
If you have JavaScript enabled (Navigator 3.x -- " Options | Network Preferences | Languages | Enable JavaScript"), you'll notice how above blocks change colors when you move
your mouse over them. Using the same technique, you can create "animated"
buttons.
Using Navigator 3.x, you can change the source of an image (in turn change the image
itself) by using the following code:
<SCRIPT
language="JavaScript">
document.images[ <Image ID> ].src = "home.gif";
</SCRIPT>
"Image ID" represents which image 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 (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, what we're doing is using " OnMouseOver"
and "OnMouseOut" JavaScript events to change the images. Let's look at the
JavaScript source code used to create above examples:
<SCRIPT LANGUAGE="JavaScript">
nImg1ID = 0
nImg2ID = 0
nImg3ID = 0
bCalled = 0
bCompatibleBrowser =
( (navigator.userAgent.indexOf("a/3", 6 ) >= 0) ||
(navigator.userAgent.indexOf("a/4", 6 ) >= 0) );
function FindImageIDs()
{
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;
}
}
}
bCalled = 1;
}
//
// change the source of a given
// image using it's index
//
function ChangeImage( nImgID, sImgSrc )
{
if( bCompatibleBrowser )
{
if(document.images)
{
document.images[ nImgID ].src
= sImgSrc;
}
}
}
</SCRIPT>
|
Now, let's look at the HTML code used in our 2nd example (animated home button -- as in
Internet 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>
|
By calling FindImageIDs() function, we first find out the ID (or the index) of our image --
"home1a.gif," then we simply call ChangeImage() function to change
"home1a.gif" (originally) to the new image we want. If the mouse is over
our image, then we change it to "home1b.gif" and if the mouse is out side of our image, we change it back
to "home1a.gif." Of course, we didn't have to use FindImageIDs()
function to get the image IDs (we could have manually counted our images). But, using FindImageIDs()
function insures that our image IDs will stay correct even if we change the placement (in
turn change the image ID/index) of images on our page. |
|
