HTML and CSS Reference
In-Depth Information
Table 11-18 Code to Create popupCaption() Function
Line
Code
23
function popupCaption(evnt,currElement) {
24
var imgShow=”chapter11-1”+currElement+”.jpg”
25
var documentObj=document.getElementById(currElement).style
26
if (currElement!=0) {
27
var state=documentObj.visibility
28
if (state==”visible” || state==”show”) {
29
documentObj.visibility=”hidden”
30
document.getElementById(“trailImage”).src=”chapter11-1trailImg1.jpg”
}
31
32
else {
33
documentObj.visibility=”visible”
34
document.getElementById(“trailImage”).src=imgShow
35
}
36
}
37
}
Line 23 declares the popupCaption( ) user-defined function and assigns two
parameter values: the event value (evnt), and the element name or id (currElement). Later
in the chapter, the code for the onMouseOver and onMouseOut event handlers, which
pass values to the function for these parameters, will be entered. The event value indicates
if the mouse pointer is moved over or off the hyperlink or if the hyperlink is clicked. If the
visitor clicks the mouse, the function receives the null parameter as the event value, which
does not trigger an event. The name or id parameter passed to the function indicates the
style sheet selector to be used with the associated text in the <div> tags.
Line 24 uses currElement and constructs a graphic filename associated with the
pop-up caption, and is used to display an image associated with the caption. Line 25
defines one local variable, documentObj, that will be used to show or hide the caption.
Line 26 tests the value of currElement to determine which link element the mouse is over.
If the value is greater than 0, line 27 defines the current state of the element with style
property, visibility.
Line 28 then tests if the state is visible or show. If the caption is already showing,
the visibility property of the caption is set to “hidden,” (line 29), and the original trail
image is shown (line 30); line 29 completes the if statement and the else (line 32) begins
the code to display the pop-up caption (line 33) with the associated trail image (line 34).
The currElement in mouse event handlers is the name of the trail image and the <div> tag
id attribute that contains the pop-up caption text. Line 35 closes the else. Line 36 closes
the if at line 26, and line 37 closes the function at line 23. The position of the caption is
fixed and set by the CSS id selectors. These captions display below the body text and to
the left of the new image that displays on the page.
Search WWH ::




Custom Search