JavaScript Animation
With JavaScript we can create animated images.
Examples
Button animation
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" name="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</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.
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.w3schools.com" target="_blank">
<img border="0" alt="Visit W3Schools!"
src="b_pink.gif" name="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</a>
</body>
</html>
|
Whether you're new to XML or already an advanced user, the user-friendly views
and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to
meet your XML and Web services development needs from start to finish.
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- Support for Office Open XML (OOXML)
- Graphical WSDL editor & SOAP debugger
- Java, C#, C++ code generation
- And much more!
Download a free 30-day trial today!
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
|
| 
HOME
Printer friendly page
