JavaScript Animation

[welcomewiki]

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 ****on 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:



onmouseOver="mouseOver()" onmouseOut="mouseOut()" />


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:







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








onmouseOver="mouseOver()" onmouseOut="mouseOut()" />

Similar Threads:

• JavaScript While Loop
• JavaScript Where To
• JavaScript How To
• Roadside Romeo nominated for American animation award
• Good, bad and ugly of animation movies in 2008