In this project, you will create a Web page with an animation of a man
using a jackhammer. Your Exercises folder for Chapter 10 contains 11 images that are required for this program: jackhammer0.gif through jackhammer10.gif.
1. Create a new document in your text editor.
2. Type the <!DOCTYPE> declaration, <html> element, header information, and the <body> element. Use the strict DTD and “Jackhammer” as the content of the <title> element.
3. Add the following script section to the document head:
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
4. Add the following text and elements to the document body. The text and elements include an <img> element to display the image, and a form with buttons that controls the animation.
<h1>Jackhammer Man</h1>
<p><img src="jackhammer1.gif" height="113" width="100"
alt="Image of a man with a jackhammer." /></p>
<form action="" enctype="text/plain"><p>
<input type="button"
value="Start Bouncing"
onclick="startBouncing();" />
<input type="button" value="Stop Bouncing"
onclick="clearInterval(begin);" /></p>
</form>
5. Add the following variable declarations to the script section:
var jackhammers = new Array(11);
var curJackhammer = 0;
var direction;
var begin;
jackhammers[0] = "jackhammer0.gif";
jackhammers[1] = "jackhammer1.gif";
jackhammers[2] = "jackhammer2.gif";
jackhammers[3] = "jackhammer3.gif";
jackhammers[4] = "jackhammer4.gif";
jackhammers[5] = "jackhammer5.gif";
jackhammers[6] = "jackhammer6.gif";
jackhammers[7] = "jackhammer7.gif";
jackhammers[8] = "jackhammer8.gif";
jackhammers[9] = "jackhammer9.gif";
jackhammers[10] = "jackhammer10.gif";
6. Now add the following functions to the script section, which
control the animation:
function bounce() {
if (curJackhammer == 10)
curJackhammer = 0;
else
++curJackhammer;
document.getElementsByTagName(
"img")[0].src
= jackhammers[curJackhammer].src;
if (curJackhammer == 0)
direction = "up";
else if (curJackhammer == 10)
direction = "down";
document.getElementsByTagName(
"img")[0].src
= jackhammers[curJackhammer];
}
function startBounce
function startBouncing() {
if (begin)
clearInterval(begin);
begin = setInterval("bounce()",90);
}
7. Save the document as Jackhammer.html in your Exercises folder for Chapter 10, and validate it with the W3C Markup Validation Service. Once the document is valid, open it in your Web browser and test the animation buttons.
