Introduction:
This article allows you to display what appears to be a single image animation using three different images. The images in the animation will need to be all the same size. The animation repeats indefinitely.
The first image will be placed on the page and set the height and width. Image name should specify in the <img> tag like this:
<img src="Blue hills.jpg" name="demo" border= "2px" width="100" height="100" alt="demo">
Example: See the following example to understand the multiple image animation.
JavaScript is given as follows within <head> and <body>tag.
<html>
<head>
<title>ImageAniation</title>
<script language="JavaScript">
// Preloaded images
if (document.images)
{
demo1 = new Image();
demo1.src = "Sunset.jpg"
demo2 = new Image();
demo2.src = "Water-lilies1.jpg";
demo3 = new Image();
demo3.src = "Winter.jpg";
}
// Reusable timer
function timeimgs(numb)
{
thetimer = setTimeout("imgturn('" +numb+ "')", 1000);
}
// Reusable image turner
function imgturn(numb)
{
if (document.images)
{
// This will loop the image
if (numb == "3")
{
document["demo"].src = eval("demo3.src");
timeimgs('1');
}
else
{
document["demo"].src = eval("demo" + numb + ".src");
timeimgs(numb = ++numb);
}
}
}
</script>
</head>
<body bgcolor="olive" onload="timeimgs('2');">
<font color= purple><h2>Image Animation</h2></font>
<img src="Blue hills.jpg" name="demo" border= "2px" width="100" height="100" alt="demo">
</body>
</html>
Output:
To view the output copy this script and paste on your HTML page within <html> tag. You have to change the image name in this example when you paste on your HTML page.
You will see the output something like this:
Figure 1: This image will display at starting.
After one second following image will display at same position (according to this example).
Figure 2: Second image is displaying.
All images will display one by one with same time interval.
Figure 3:
Figure 4:
You will understand this article when you see the output in a proper way. So copy and paste this script on html page and try to understand.