HTML and CSS Reference
In-Depth Information
To Enter the popupCaption() Function
The following step enters the code for the popupCaption() user-defined function.
1
•
the
e n t e r
key once.
Click line 22 and press
•
shown in Table 11-18
on the previous
page to create the
popupCaption()
function, indenting as
shown, and then press
the
e n t e r
key once
to place the insertion
point on line 38
(Figure 11-30).
Enter the code
getElementById() method
creates object for mouse
event handlers
determines state of
caption, if visible, hides
and displays default image
displays caption and
associated image
press the
e n t e r
key once
Figure 11-30
Adding an Embedded Style Sheet Using id
and Class Properties
The embedded style sheets used on the Trails Web page employ the id and class
selectors to define the style for each of the four pop-up captions. Each caption is identified
uniquely using an id attribute and value, so the popupCaption() function can ensure that
only one caption appears at a time. An id selector is used in a style sheet much like a class
selector — except that the id selector is entered with a preceding pound sign (#).
In the Trails Web page, the <div> tag is used to enclose the text that appears in the
pop-up captions. In this use, the <div> tag is referred to as a container. A
container
means
that the text is grouped together. Text enclosed within the <div> tag is referred to as
inline
. The id and class attributes are used in the <div> tag to associate the selectors in the
embedded style sheet with each of the four pop-up captions.
The popupCaption() user-defined function needs two parameters: evnt and
currElement. For each pop-up caption, the evnt parameter indicates the type of event,
using an onMouseOver or onMouseOut event handler, and the currElement parameter
passes the style sheet id selector. Figure 11-31 illustrates the relationship between the
event handler function call, the associated selector in the style sheet, and the text in the
<div> tag. The <div> tag contains an id attribute, which is the style sheet selector, and the
style sheet class, which indicates how to format the displayed pop-up caption text. Thus,
to apply a style to the pop-up captions, the embedded style sheet uses the id attribute
value as the selector.
id and class Selectors
Recall from earlier chapters
that an id selector is used
to identify one element,
and the class can be used
to identify more than one.
The class selector must
be notated by the class
attribute in the HTML tag.
In the normal hierarchy
of cascading selectors, the
id selector has a higher
priority than attribute
selectors.
