Printable View
Is it possible to create animated images in JavaScript. I have never created any animation images in JavaScript. I have done that in other applications. I came to know that we can create that in JavaScript also. Can anyone tell me how to create Animated Images using JavaScript? It would be much better if you provide the coding for creating animated images in JavaScript.!!:notworthy
You can create animated images using the JavaScript. The idea behind Javascript-based animation is fairly simple; a number of DOM elements are moved around the page according to some sort of pattern determined by a logical equation or function. The trick is to let a JavaScript change between different images on different events. To achieve the effect of animation, elements must be moved at a given interval or frame rate; from a programming perspective, the simplest way to do this is to set up an animation loop with a delay. 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.
I have given you an example so that you can understand the concept very clearly. I have added an image that should act as a link button on a web page in the following example. Then I have added an events like onMouseOver and onMouseOut which are commonly used while creating an image. These two events will run two JavaScript functions that will change between the images. The HTML code will be :
And after writing code in HTML, the changing between the images is done with the following JavaScript :HTML Code:<a href="http://www.techarena.com" target="_blank">
<img border="0" alt="Visit TechArena!" src="welcome.gif" id="b1"
onmouseOver="mouseOver()" onmouseOut="mouseOut()" /></a>
Code:<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="hi.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="welcome.gif";
}
</script>
I think that you will get confused with the coding that 'Deabelos' has provided you. So I have combined that coding and given it below :
HTML Code:<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="hi.gif";
}
function mouseOut()
{
document.getElementById("b1").src ="welcome.gif";
}
</script>
</head>
<body>
<a href="http://www.techarena.com" target="_blank">
<img border="0" alt="Visit TechArena!" src="welcome.gif" id="b1"
onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>
You should have understood the concept of using the animated images. Yet I thought to provide you more information about the same. The jpg image format has no provision for animation, however, with a little JavaScript and a dash of creativity, we can easily make an "animated" jpg. You will have to start by preloading all the jpg images required in the "animation". The second step is to use a function that changes the source of an image. And then at last, we call this function repeatedly by employing the setTimeout() method. I generally say that Animation is like hot sauce - a little goes a long way. Use it sparingly to spice up your page and enhance your content.
The jpg image format has no provision for animation, however, with a little JavaScript and a dash of creativity, we can easily make an "animated" jpg. Changing the position of the background image felt to be the best approach to creating the type of effect. Before using the Animated Images using JavaScript, you should know the following things :
- Always start with images that are the same size or the browser will scale them to fit.
- JavaScript rollovers only work inside the anchor <A> tag. The beginners make two common mistake that are to include them in the IMG or forget to include the NAME attribute in the IMG tag.
- Also be sure to test all your JavaScript applications when the final version is released.
- Animation effects created with JavaScript won't work if users have JavaScript turned off in their browsers.
Why don not you use Video Avatar?
Very easy to use program for creating gifs)
I like it)
:bleh: