HTML and CSS Reference
In-Depth Information
random image starts to
scroll down Web page
mouse over the
word Bowl causes
ball to move to pins
position of bowling ball
with mouse over Bowl
new image of pins to
appear as though ball
is knocking them over
Figure 11-40
Perform the following tasks:
1. Open the extend11-1.html data file and save it immediately as extend11-1solution.html.
2. Using line 27 from Table 11-13, which sets the position of the image, as a guide, write a
user-defined function called moveRight() to move the bowling ball object to the right at the
position of the bowling pins. Assign the image file extend11-1pinsdown.gif to the pins object.
3. Write a user-defined function called moveBack() to move the bowling ball object back to its
original position on the left side of the Web page. Assign the image file extend11-1pinsup.gif
to the pins object.
4. Add the following id selectors in the embedded CSS called pins and bowling_ball. Set the pins
properties as follows: position: absolute; left: 900px; top: 217px. Set the bowling_ball properties
as follows: position: absolute; left: 200px; top: 225px.
5. A <span> tag with the id ImgText preceeds the word Bowl. Add another CSS id selector (ImgText)
to the embedded style sheet for this id. Set the properties as follows: position: absolute; left: 10;
top: 196px.
6. After the <span> tag, insert in the <a href=“#”> tag the mouse events to call the moveRight() and
moveBack() user-defined functions.
7. The apDiv1 selector places an image to the right of the banner using an id of splits. Write
the user-defined function called selectImg() to assign a random image to the splits image.
These images are of various types of splits that can be left in bowling. The filenames are as
follows: extend11-1_2-4-7.gif, extend11-1_4-7-8.gif, extend11-1_4-10.gif, extend11-1_5.gif,
extend11-1_6-10.gif, and extend11-1_7-10.gif. After assigning the random image, call a
user-defined function called dropImage().
8. Write the user-defined function, dropImage() to make the randomly selected split image drop
from the top to the bottom of the screen. Modify the code in Table 11-13 by changing the leftPX
to topPX, test if the topPX > 600. If the image is at the bottom of the Web page, reset topPX to
10 and stop the scroll with the clearTimeout() method. To move the image from top down, use
the getElementById() on the apDiv1, setting the style.pixelTop to the topPX value. Do not forget
to use recursion to call the dropImage() function from within itself.
Continued >
