|
With JavaScript we can create animated images.
JavaScript Animation
It is possible to use JavaScript to create animated images.
The trick is to let a JavaScript change between different
images on different events.
In the following example we will add an image that should act
as a link button on a web page. We will then add an onMouseOver
event and an onMouseOut event that will run two JavaScript
functions that will change between the images.
The HTML Code
The HTML code looks like this:
<a href="http://www.codedcode.com" target="_blank"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()">
<img border="0" alt="Visit codedcode!"
src="b_pink.gif" name="b1" />
</a>
|
Note that we have given the image a name to make it possible
for JavaScript to address it later.
The onMouseOver event tells the browser that once a mouse is
rolled over the image, the browser should execute a function
that will replace the image with another image.
The onMouseOut event tells the browser that once a mouse is
rolled away from the image, another JavaScript function should
be executed. This function will insert the original image again.
IMPORTANT! The mouse events are added to the <a> tag,
and not to the <img> tag. Unfortunately, browsers do not support
mouse events on images!
The JavaScript Code
The changing between the images is done with the following
JavaScript:
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script>
|
The function mouseOver() causes the image to shift to
"b_blue.gif".
The function mouseOut() causes the image to shift to
"b_pink.gif".
The Entire Code
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b_blue.gif"
}
function mouseOut()
{
document.b1.src ="b_pink.gif"
}
</script>
</head>
<body>
<a href="http://www.codedcode.com" target="_blank"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()">
<img border="0" alt="Visit codedcode!"
src="b_pink.gif" name="b1" />
</a>
</body>
</html>
|
|
