Web page

Web page

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[ */

/* ]] */


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.

<h1Jackhammer 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


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;





        = jackhammers[curJackhammer].src;

    if (curJackhammer == 0)

        direction = "up";

    else if (curJackhammer == 10)

        direction = "down";



        = jackhammers[curJackhammer];


function startBounce

function startBouncing() {

    if (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.
Powered by