Your cases folder for chapter 10 contains an animated GIF file for a running pup
ID: 3539934 • Letter: Y
Question
Your cases folder for chapter 10 contains an animated GIF file for a running puppy, along with six individual images (puppy0.gif through puppy5.gif) that are used in the animation. Create a javascript program that animates the six images the same as the animated GIF file.Use image caching to start the animation as soon as the images finish loading, and be sure to use either the getElementById(), getElementsByName(), or getElementsByTagName() method to dynamically update the image element. Save the document as RunningPuppy.html
Explanation / Answer
Hi ,
I ran this in my browser and it works perfectly. Hope it helps you :)
<html>
<script type="text/javascript" >
var image = new Array();
// Will be precached.
image[0] = new Image(480, 320);
image[0].src = "puppy0.gif";
image[1] = new Image(480, 320);
image[1].src = "puppy1.gif";
image[2] = new Image(480, 320);
image[2].src = "puppy2.gif";
image[3] = new Image(480, 320);
image[3].src = "puppy3.gif" ;
image[4] = new Image(480, 320);
image[4].src = "puppy4.gif";
image[5] = new Image(480, 320);
image[5].src = "puppy5.gif";
var x=0;
window.setInterval(function(){animate()},100);
function animate()
{
x++;
document.imagePlaceHolder.src = image[x].src;
// to loop through 5 images. If you have 10 images, change the 5 in the below line to 10
if(x==5)
{
x=0;
}
}
</script>
<body>
<img name="imagePlaceHolder" src="gif.png">
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.