• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Workshop

Quiz

1: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>

A1: 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/hour19, 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>

2:Now modify the page from Question 1 so that clicking the fall.gif image makes it leap back out of sight.
A2: 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>

Exercises

  • Try combining the techniques you learned in this hour with the JavaScript examples in Hour 18. 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!


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint