InformIT: Sams Teach Yourself HTML 4 in 24 Hours

Workshop

Quiz

Modify the following Web page so that the Balzout Skydiving heading and fall.gif image drop into place together from above the top edge of the browser window. (Use the slide.js script presented in this hour.)

<html><head><title>Take a Dive</title>
</head><body>
<img src="diver.gif" align="left" width="100" height="200" />
<h1>Balzout Skydiving</h1>
Join Richard Balzout for a free chute-packing lesson
on June 15th at the Sewerside Memorial Airfield.
</body></html>

Now modify the page from Question 1 so that clicking the fall.gif image makes it leap back out of sight.

Answers

The following is one possibility. You could change the speed of the fall by adjusting the value of yhop. (This quiz answer is included in the online examples at http://24hourHTMLcafe.com/hour20, by the way.)

<html><head><title>Take a Dive</title>
<script src="slide.js" language="javascript">
</script></head><body>
<body OnLoad="if (checkDHTML()) {
 layername=makeName('ComeOnDown');
 yhop=5; ygoal=10; xhop=0; xgoal=10; slide() }">
<div id="ComeOnDown"
 style="position: absolute; left: 10px; top: -210px">
<img src="diver.gif" align="left" width="100" height="200" />
<h1>Balzout Skydiving</h1></div>
<div style="position: absolute; left: 10px; top: 220px">
Join Richard Balzout for a free chute-packing lesson
on June 15th at the Sewerside Memorial Airfield.</div>
</body></html>

Replace the <img /> tag with the following:

<a href="#" OnClick="layername=makeName('ComeOnDown');
 yhop=-10; ygoal=-210; xhop=0; xgoal=10; slide()">
<img src="diver.gif" align="left"
 width="100" height="200" border="0" /></a>

Exercise

Try combining the techniques you learned in this hour with the JavaScript examples in Hour 19. For example, you might create a graphical meter by moving an image up and down on the page in response to a number entered in a form input box. The possibilities are endless, so grab your imagination and get creative!

VI. Building a Web Site | Next Section

Previous Section