HTML and CSS Reference
In-Depth Information
To Enter Cascading Style Sheet id and Class Selectors for the Pop-up Captions
The following steps enter the Cascading Style Sheet id and class selectors for the pop-up captions.
1
•
Click line 88 and press the
e n t e r
key.
•
Enter the code shown in Table 11-19
starting on the previous page
from lines 89 to 111 to enter the
id selectors in the embedded style
sheet, indenting as shown. Press the
e n t e r
key twice to position the
insertion point on line 113
(Figure 11-32).
style sheet id selectors are
connected to text in <div> tags
for each pop-up caption
press the ENTER
key twice
Figure 11-32
2
•
Continuing on line 113, enter the
code shown in Table 11-19 from
lines 113 through 127 to enter the
styles for the class captionText,
indenting as shown, and then
press the
e n t e r
key after line 127.
(Figure 11-33).
In this code for the style sheet, both
color names and hexidecimal codes
are used. What is the difference?
No difference exists. Most browsers
will recognize the standard colors by
name. Other colors must be entered
using their hexidecimal values.
selector for pop-up
caption text so all
text is formatted
the same
press the
e n t e r
key once
Figure 11-33
To Add Links and Event Handlers to Call the popupCaption() Function
The four terms, highlighted as links in the Trails Web page, must have onMouseOver and onMouseOut event
handlers code associated with these <a href> tags to call the popupCaption() user-defined function. The popupCaption()
function changes the image on the Web page and displays the pop-up caption when the visitor places the mouse over
the hyperlink.
Normally, a link is associated with a URL, so when the visitor clicks the hyperlink, the browser shows a new
Web page. This Web page uses links associated with the onMouseOver and onMouseOut event handlers to show
the pop-up caption when a user points to the link. The <a href=“#”> is used so the browser will not show a new Web
page if a user accidentally clicks the link.
The following steps enter the pop-up caption links and the onMouseOver and onMouseOut event handlers
to call the popupCaption() function.
