Animating image using javascript

Animating image using JavaScript- Using JavaScript function document.getElementById() we can create simple image animation as given below:

E.g.

<html>
<head>
<title>Click Image to Animate
</title>
</head>
<body>
Click Image to Animate
<br>
<img id="imageid" onclick="imgchange()" 
src="img1.png">
<script>
function imgchange() 
{
var image = document.getElementById("imageid");
if (image.src.match("img1")) 
{
image.src = "img2.png";
} 
else if(image.src.match("img2"))
{
image.src="img3.png";
}
else if(image.src.match("img3"))
{
image.src="img4.png";
}
else 
{
image.src = "img1.png";
}
}
</script>
</body>
</html>

Check Output:

Download Codes
Related Topics: