|
|
|
Before you can add an animated button to your page you need to add the button image itself.
After adding the button image to the webpage you need to add a few comments to the image tag.
After that you can add the javascript that changes the image when the mouse moves over it.
The first half of this page covers the plain HTML code for inserting an image so that javascript can refer to it.
The second half covers the javascript that changes the image when a mouseover occurs.
THE HTML CODE
A regular image that works as a link button looks somewhat like this in HTML code:
<a href="mypage.htm">
<Img Src="button1a.gif">
</a>
|
|
To make it possible for javascript to change the image we need to give it a name that can be used by javascript to address it.
So in our case the HTML would look like this:
<a href="mypage.htm">
<Img Src="button1a.gif" name="button1">
</a>
|
|
Now the button has a name that can be used as a reference when we want javascript to replace it with another image.
We need to tell the browser that once a mouse is rolled over the image, the browser should execute a function that replaces the image.
This is done with the onMouseOver event.
In addition we also need to tell the browser that once the user rolls the mouse away from the image, another javascript should be solved in order to let the initial image of the button return.
This is done with the onMouseOut event.
The final HTML code looks like this:
<a href="mypage.htm" onmouseOver="MouseOverRoutine('button1')" onmouseOut="MouseOutRoutine('button1')">
<Img Src="button1a.gif" name="button1" ></a>
|
|
This is all you need to do in the HTML part of the page. The rest is done in javascript.
Note:
The mouse events are added to the <a href> tag - NOT the image tag. This is because browsers do not look for mouseover events on images. As stupid as it may sound it is nevertheless true. Therefore we can only make images animated by turning them into links. Since browsers understand mouseover events on links, they will register a mouse event on an image, if that image is a link.
THE JAVASCRIPT CODE
The following javascript should be added to the head part of your webpage.
<Script>
<!--
// The previous line hides the script from
// old browsers that can't interpret it
// Assuming the image of the up button is called "button1a.gif"
// And that the image of the down button is called "button1b.gif"
// We can now read these two images into variables
// called button1up and button1down.
button1up = new Image; button1up.src = "button1a.gif";
button1down = new Image; button1down.src = "button1b.gif";
// Now the two images are defined.
// Next step is the two functions needed.
// The first function is called MouseOverRoutine,
// and causes button1up to shift to button1down.
function MouseOverRoutine(ButtonName)
{
if (ButtonName=="button1")
{document.button1.src = button1down.src;}
}
// Now our button will shift from button1up to button1down
// when a mouseover event occurs.
// To complete the script all we need to do
// is make the inverse function, that will do exactly the opposite
// when a mouseout event occurs.
function MouseOutRoutine(ButtonName)
{
if (ButtonName=="button1")
{document.button1.src = button1up.src;}
}
// Thats all there is.
// The final step is ending the script section which is done by two lines:
// The next line causes oldfashion browsers to
// start interpreting the code again.
//-->
</script>
|
|
If you want more than one button on your page, all you need to do is double each line referring to button1 and change it to button2, button3 or whatever number of buttons you might have.
|
|
|
|
"Better Than Books - As Easy As It Gets!"