JavaScript Animation
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.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif"
id="b1"
onmouseOver="mouseOver()" onmouseOut="mouseOut()" /></a> |
Note that we have given the image an id, to make it possible for a 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.
The JavaScript Code
The changing between the images is done with the following JavaScript:
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("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
Example
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="b_pink.gif";
}
</script>
</head>
<body>
<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!" src="b_pink.gif"
id="b1"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html> |
Try it yourself »
|
Create a free Flash website with our simple, online web design editing platform. Stunning templates
and user-friendly tools make website building easy and fun.
Start Creating your free website now!
Need an easy way to get data into XML, or transform XML to another format?
MapForce lets you map XML data to/from any combination of XML, database, flat file,
Excel 2007, XBRL, or Web services data. Then it transforms data instantly or
auto-generates royalty-free code for recurrent conversions.
New features in Version 2010!
- Easy-to-use, graphical data mapping interface
- Instant data transformation
- XSLT 1.0/2.0 and XQuery code generation
- Java, C#, and C++ code generation
- Advanced data processing functions
- Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
- Visual Studio & Eclipse integration
- Available in 32-bit and 64-bit versions
Download a fully-functional trial today!
|
|
|
| 
