Your cases folder for chapter 10 contains an animated GIF file for a running pup
ID: 3539834 • 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
Now copy paste this code (below dotted line ) in a text file and save it as "RunningPuppy.html" and place all your puppy picture named "dog1.png" to "dog7.png" in the same folder where you place "RunningPuppy.html".and then run "RunningPuppy.html"
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function start()
{
setInterval(changepic,70);
}
function changepic()
{
if(document.getElementById(1).src.indexOf("dog1.png")>0)
{
document.getElementById(1).src="dog2.png";
}
else if(document.getElementById(1).src.indexOf("dog2.png")>0)
{
document.getElementById(1).src="dog3.png";
}
else if(document.getElementById(1).src.indexOf("dog3.png")>0)
{
document.getElementById(1).src="dog4.png";
}
else if(document.getElementById(1).src.indexOf("dog4.png")>0)
{
document.getElementById(1).src="dog5.png";
}
else if(document.getElementById(1).src.indexOf("dog5.png")>0)
{
document.getElementById(1).src="dog6.png";
}
else if(document.getElementById(1).src.indexOf("dog6.png")>0)
{
document.getElementById(1).src="dog7.png";
}
else if(document.getElementById(1).src.indexOf("dog7.png")>0)
{
document.getElementById(1).src="dog1.png";
}
}
</script>
</head>
<body>
<img id ="1" src="dog1.png" width="100px" height="100px" />
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.