HTML and CSS Reference
Creating Pop-up Captions
Creating a pop-up caption requires the following steps:
associated with a particular image
The following steps detail the programming logic for the popupCaption() function:
1. Define the image file using the element id
2. Construct the pop-up object and determine the state (hidden or visible)
3. If visible, hide the pop-up captions and restore the original image
4. If hidden, show the pop-up captions with the new image
Entering the embedded style sheet
Entering the <a> tags and event handlers for each of the four terms
Entering the <div> tags containing the pop-up captions text and style sheet attributes
that format the appearance of the pop-up captions text
Creating Pop-up Captions on the Trails Web Page
The Trails Web page includes four elements that appear as hyperlinks on the Web
page: 362, bees, butterflies, and baby bunnies. When the user places the mouse over
these hyperlinks, a pop-up caption will display as a new image appears. Figure 11-1d
on page HTML 509 shows an example of a pop-up caption.
The four words appear as hyperlinks by using the anchor tag <a> embedded with
properties, in conjunction with associated style sheet definitions, to show the caption text.
Each pop-up caption is defined by <div> tags with id and class attributes that work in
conjunction with the style sheet.
To Open an Existing HTML File in Notepad++
user-defined function, the style sheet information, the <a> tag, the event handlers to call
If necessary, start Notepad++.
Open the chapter11-1trails.html file in the Chapter11\ChapterFiles folder.
To Copy and Paste the Navigation Bar, Event Handlers,
and Image Rollover Functions
To maintain consistency in looks among all the Web pages, the Trails Web page should
use the same the navigation created for the Hickory Oaks Forest Preserve Home page.
If necessary, open the chapter11-1homesolution.html in Notepad++ in the Chapter11\