HTML and CSS Reference
In-Depth Information
Explore how to
use CSS to create
an interactive
map with popup
boxes.
Case Problem 3
Data Files needed for this Case Problem: bluebar.png, image0.jpg-image9.jpg,
longstxt.htm, lpmap.jpg, maptxt.css, modernizr-1.5.js
Longs Peak Interactive Map
Longs Peak is one of the most popular attractions of Rocky
Mountain National Park (RMNP). Each year during the months of July, August, and
September, thousands of people climb Longs Peak by the Keyhole Route to reach the
14,255-foot summit. Ron Bartlett, the head of the RMNP Web site team, has asked for
your help in creating an interactive map of the Keyhole Route. The map will be installed
at electronic kiosks in the park's visitor center. Ron envisions a map with 10 numbered
waypoints along the Keyhole Route, displaying a popup photo and description when a
mouse pointer hovers over one of the numbered points. Figure 4-80 shows a preview of
the online map with the fi rst waypoint highlighted by the user.
Figure 4-80
Longs Peak interactive map
