HTML and CSS Reference
14. Each of the popup boxes has been placed within a fi gure box. Initially, these popup
boxes should be clipped so that only the number is shown. Create a style rule for
the figure element to: a) set the background color to the value (70, 76, 222); b) set
the text color to white; c) set the width to 150 pixels; d) add rounded corners with a
radius of 15 pixels; e) position the fi gure box using absolute positioning (but do not
specify a top or left coordinate); f) set the z-index value to 1; and g) clip the content
using a clipping rectangle that is 20 pixels wide by 20 pixels high and situated in the
top-left corner of the fi gure box.
15. If a user hovers the mouse pointer over a fi gure box, then remove the clipping rect-
angle and increase the z-index value to 2 (so that it appears on top of other objects).
16. For the fi gure caption within each fi gure box, set the font size to 12 pixels and the
margin to 10 pixels.
17. Set the text color of each time element within each fi gure box to yellow.
18. Each of the 10 fi gure boxes has an id, ranging from point0 to point9. Set the (left,
top) coordinates of the fi gure boxes as follows:
point0 at (560, 60)
point1 at (277, 90)
point2 at (175, 0)
point3 at (110, 115)
point4 at (55, 165)
point5 at (5, 180)
point6 at (15, 222)
point7 at (50, 245)
point8 at (100, 245)
point9 at (90, 220)
19. Save your changes to the fi le and then open longs.htm in your Web browser. Verify
that the placement of the waypoints follows the locations shown in Figure 4-80.
Confi rm that when you hover your mouse over each of the 10 waypoints, a descrip-
tion of the waypoint appears on the top of the trail map.
20. Submit your completed fi les to your instructor, in either printed or electronic form,