HTML and CSS Reference
In-Depth Information
5. Use the code in Table 11-12 on page HTML 526 to create the slide show to the right of the body
text. The <img> tag id attribute is slideHolder for assigning the next image in the slide array.
6. The filenames for the slide show array (slides) are lab11-2agate1.jpg, lab11-2agate2.jpg,
lab11-2amethyst-geode.jpg, lab11-2carmel-ooids.jpg, lab11-2flint.jpg, and lab11-2petrified_wood.jpg.
7. Use the code in Table 11-18 to create a pop-up caption that also displays the hidden image, which
is the map of Pangea, along with the caption text. To display the map, use the getElementById()
with <img> tag id attribute pangea_map, to set the properties of style.visibility to hidden or visible,
depending on the state.
8. Enter the embedded style sheet selector, #pangea for the pop-up caption. Use the following
attributes and properties: position: absolute; visibility: hidden; display: inline-block.
9. Enter the embedded style sheet class selector, .pangeaText for the pop-up caption. Use the
following attributes and properties: background-color: #006600; padding: 5px; margin-left: 25%;
border: 2px solid black; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius:
20px; -webkit-box-shadow: 3px 3px 4px #000; -moz-box-shadow: 3px 3px 4px #000; box-shadow:
3px 3px 4px #000; width: 250px; font-weight: bolder; color: white.
10. Before the closing </body> tag, enter the following <div> tag for the pop-up caption text:
<div id=“pangea” class=“pangeaText”> Pangea, from the Greek for “all the earth,” was formed
about 300 million years ago. </div>.
11. Save the completed HTML file as lab11-2solution.html.
12. Test the completed Web page by loading the lab11-2solution.html in your browser. Click the
Pangea link to see the pop-up caption and image. Make sure the slide show is not missing any
images. Reload the page and make sure a new random image displays. If an error occurs, check your
code from Steps 3 through 10, save, and test again.
13. Validate your Web pages, and submit the completed HTML files and Web pages in the format
specified by your instructor.
In the Lab
Lab 3: Hickory Oaks Bird Sanctuary
Instructions:
You are a volunteer at the Hickory Oaks Bird Sanctuary. The director knows of your classes
in Web page development and asks you build a Web site that showcases the bird sanctuary. He wants a
total of four Web pages, including a Home page, Birds, Bird Count, and Supplies shop page. He wants to
use image rollovers for a navigation bar. The Home page is an overall description of the Hickory Oaks
Bird Sanctuary and displays a random image every time the page is loaded. The Birds page describes the
mission of the sanctuary and contains a slide show of various species of birds that may be seen at different
times of the year. The Bird Count page seeks volunteers to count birds. The body of the page has four
terms marked as links, so that when a user moves a mouse over the term, a pop-up caption displays and
new image displays to the right of the body text. The Supplies page has a floating image, an eagle, that
moves left to right beneath a set of images. When the user moves the mouse over the eagle, it stops.
When the mouse is moved off, it continues to move across the Web page. If the user clicks the eagle, a
pop-up window displays a coupon (Figure 11- 44 on the next page).
Continued >
