HTML and CSS Reference
In-Depth Information
Plan
Ahead
Creating Pop-up Captions
Creating a pop-up caption requires the following steps:
Entering the JavaScript code for the user-defined function, popupCaption(), that is
•
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
JavaScript statements and event handlers to call the user-defined function popupCaption().
The popupCaption() user-defined function uses a combination of JavaScript objects and
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++
Now you will open the Trails HTML file in Notepad++ to enter the JavaScript
user-defined function, the style sheet information, the <a> tag, the event handlers to call
the JavaScript function, and the <div> tags containing the pop-up caption text.
1
If necessary, start Notepad++.
2
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.
1
If necessary, open the chapter11-1homesolution.html in Notepad++ in the Chapter11\
ChapterFiles folder.
