HTML and CSS Reference
In-Depth Information
In the Lab
continued
(b)
new image displays
when mouse hovers
over phrase “broken
light switches”
pop-up caption to
match new image
Figure 11-42
(continued)
Perform the following tasks:
1. Start Notepad++ and open the file lab11-1.html from the Chapter11\IntheLab folder of the Data
Files for Students.
2. Save the file as lab11-1solution.html.
3. Start a <script> section in the <head> section below the <title> tag on line 6.
4. Using a modified version of the code presented in Table 11-5, write two JavaScript functions called
turnSwitchOn() and turnSwitchOff() to change the switch image when the mouse is over or off the
image. Pass the id lightswitch to the function for use in the getElementById() method using the
parameter img.
5. Using the code in Table 11-18 on page HTML 539 as a guide, write a JavaScript function called
caption() to replace the tool logo image on the right side of the unordered list and display the
pop-up caption.
6. Using the code in Table 11-19 on pages HTML 541 and HTML 542 as a guide, enter the embedded
CSS selectors for ceramic tile (#ceramic), broken light switch (#switch), torn screen (#screen), and
leaky bathroom faucet (#faucet). Use the following properties for each selector: position: absolute,
visibility: hidden, and display: inline-block.
7. Enter the class selector moreInfo for the pop-up captions, and use the following properties:
background-color: #3d3d3d, padding: 5px, margin-left:20%, 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, and color: white.
8. Use the text in Table 11-23 to create the <div> tags for the pop-up caption text.
