HTML and CSS Reference
In-Depth Information
2
Position the mouse over the Center, Shop, and Trails buttons to make sure each one
functions properly.
3
Click the Shop button. Check to see that the floating image moves across the screen of
the Gift Shop page.
4
Move the mouse over the floating image to ensure it stops, and then click the image to
display the coupon pop-up window.
5
Click the Print Coupon link in the pop-up coupon window, and then click the Cancel
button in the Print dialog box. Click Close to close the pop-up window.
6
Click the Center button. After the slide show plays, click the Trails button.
7
Drag the mouse over the underlined terms to verify the new images and pop-up captions
display, and then click the Home button.
8
Validate the Chapter 11 Hickory Oaks Forest Preserve Web pages using validator.w3.org.
Quick Reference
For a list of JavaScript
statements and their
associated attributes,
see the JavaScript Quick
Reference (Appendix G) at
the back of this topic, or
visit the JavaScript Quick
Reference on the Topic
Companion Site Web
page for this topic at
www.cengagebrain.com.
To Quit Notepad++ and a Browser
1
In Notepad++, click the File menu, and then Close All.
2
Click the Close button on the Notepad++ title bar.
3
Click the Close button on the browser title bar. If necessary, click the Close all tabs button.
Chapter Summary
Chapter 11 introduced the concepts of the Document Object Model (DOM), a combination of technologies that
include HTML, Cascading Style Sheets (CSS), and a scripting language, such as JavaScript. Using the DOM, you
learned how to create a navigation bar with image rollovers, display a random image from an array of images, create
and display a slide show that automatically starts when a Web page is loaded, create a floating image that also serves
as a link to a pop-up window, and how to use pop-up captions to add more information about terms on a Web page.
The items listed below include all the new skills you have learned in this chapter.
1. Create an HTML Table to Contain the
Navigation Bar (HTML 513)
2. Create User-Defined Functions for Image
Rollovers (HTML 516)
3. Enter Mouse Event Handlers to Invoke User-
Defined Functions (HTML 517)
4. Save and Test the Hickory Oaks Forest Preserve
Web Page Navigation Bar (HTML 517)
5. Enter a Random Number Generator User-Defined
Function (HTML 521)
6. Enter Code to Show Copyright Information and
Date Last Modified (HTML 521)
7. Enter OnLoad Event Handlers in the <body> Tag
(HTML 522)
8. Create an Image Object (HTML 525)
9. Create a User-Defined Function to Add a Slide
Show (HTML 527)
10. Enter an OnLoad Event Handler to Call a Function
(HTML 527)
11. Enter the floatingImage() Function (HTML 531)
12. Enter the stopFloat() Function (HTML 532)
13. Enter the restartFloat() Function (HTML 532)
14. Enter the coupon() Function (HTML 533)
15. Enter an Embedded Style Sheet to Format the
Floating Image (HTML 534)
16. Enter <div> and <img> Tags for the Floating Image
(HTML 535)
17. Add an OnLoad Event Handler to Call the
floatingImage() Function (HTML 535)
18. Enter the popupCaption() Function (HTML 540)
19. Enter Cascading Style Sheet id and Class Selectors
for the Pop-up Captions (HTML 543)
20. Add Links and Event Handlers to Call the
popupCaption() Function (HTML 543)
21. Enter <div> Tags Containing Pop-up Caption Text
(HTML 545)
