HTML and CSS Reference
In-Depth Information
4. Save the file as lab11-3solution.html to be used as the Home Web page.
5. Open the lab11-3birds.html and add the table, the JavaScript code, and mouse event handlers to
create a navigation bar.
6. Write the JavaScript code to create the slide show. The <img> id is slideshow for assigning the next
image in the slide show. The images are lab11-3cedarwaxwing.jpg, lab11-3easternkingbird.jpg,
lab11-3fieldfarethrush.jpg, lab11-3flycatcher.jpg, lab11-3kingfisher.jpg, and lab11-3mallard.jpg.
7. Save the Web page as lab11-3birds_solution.html.
8. Open the lab11-3birdcount.html file and add the table, the JavaScript code, and mouse event
handlers to create the image rollover navigation bar.
9. Write the JavaScript code to display pop-up captions for each of the bird types. Use the image file
lab11-3osprey.jpg as the default image. Use lab11-3hummingbird.jpg for the humming bird link,
use lab11-3red-headed_woodpecker for the redheaded woodpecker, use lab11-3wren.jpg for the
wrens link, and use lab11-3yellow-headedblackbird.jpg for the yellow-headed black birds link. Use
the text in Table 11-24 for the pop-up captions and the embedded CSS id and class selectors.
Table 11-24 Pop-up Caption Text
id: hummingbird
class: birdText
Text: Did you know there are 343 species of hummingbirds in the western hemisphere?
id: red-headed_woodpecker
class: birdText
Text: This is the only woodpecker with an entirely red head and neck in North America.
id: wren
class: birdText
Text: The loss of wetlands is the primary reason for the decline in wren populations.
id: yellow-headblackbird
class: birdText
Text: The yellow-headed blackbird likes deep and wet marshy areas, ponds, and lakes with
cattails and bulrushes.
10. Save the HTML file as lab11-3birdcount_solution.html.
11. Open the lab11-3supplies.html file and add the table, the JavaScript code, and mouse event
handlers to create the navigation bar.
12. Write the JavaScript code to make an image (lab11-3_eagle.jpg) float across the page from left to
right. The image is in a <div> tag container with an id of flyingEagle.
13. Add the JavaScript user-defined functions to stop the image when the mouse is over the flying
eagle image and to continue moving the image when the mouse is off of the flying eagle. Write the
user-defined function to open the lab11-3coupon.html in a new window setting the width to 525
and the height to 365.
14. Be sure to add the appropriate event handlers to invoke the user-defined functions to all the
Web pages.
15. Save the completed HTML file as lab11-3supplies_solution.html.
16. With all the Web pages saved, test them using your browser. If an error occurs, check your code,
save, and test again.
17. Validate your Web pages and submit the completed HTML files and Web pages in the format
specified by your instructor.
