You have seen how to customize HI’ML tags with the <STYLE> tag. In this section.
we are going to manipulate the styles from within scripts and produce DHTML documents (documents that change their appearance on the browser). Because VBScript is executed on the client, it is possible to include the logic for dynamic content in HTML documents and activate them on the client.
Figure 19.11shows a simple page with information about 5ybex titles. The titles are grouped under the name of the series-to which they belong, and they form nested lists. This linear document displays all the information at once in a lengthy list of series fild titles.
If you were viewing the same information with a Visual Basic application you’d expect a different organization most likely a ~ structure-where you could expand and collapse the series and view only the titles you’re interested in. You can do something with HTML namely, use the series names as hyperlinks. to separate documents each containing the titles in the series.’ This is how titles are organized at sybex’s Web site on the World Wide
Web With ‘DHTML you can organization the series and their titles in an expandable list withoutving to make additional trips to the Web server. Each series title can act as a hots pot that when c1iclced expands the following list.Open the document SBXH!MLHTM (in this chapter’s folder on the CD) with Internet Explorer and experiment with it. Click the document’s title to expand the first-level list (the names of the series), and then click the name of a series to see its titles. If you click the list wiD ooUapse and make room for other lists. Figures 19.12 and 19.13 show this document in action.
DHTMLallows ~ wrItt
Web pIgIS thIt chInge
their look and content
based on viewer idIons.
1!f Developers HIncIIooks
entry turns red when the
pointer hovels IMIIt.
The <DIV> tags mark the beginning and end of an element. The header “Mastering” and the following description form a distinct element, because they are enclosed in a pair of <DIV> tags. The 10 attribute of the <DIV> tag is the name of the element.
Following the “Mastering” header (which we’ll turn into a hotspot) is the list of the Mastering titles. The entire list is another element, because we must be able to expand and collapse it. The definition of the Mastering list is based on the straight HTML code presented earlier, but it’s enclosed in a pair of <DIV> tags. Here’s the “Mastering” list:
<DIV ID-‘WC3’ STYLE-‘display:none’>
<FONT SI4E-2>
<UL>
<LI>Mastering Web Design
<LI>Mastering the Internet (2ns Ed)
<LI>Mastering Windows NT 4
<LI>Mastering Windows 95
</UL>
</FONT>
</DIV>
Again, I’ve omitted the definitions of the hyperlinks to make the code easier to read. Notice that this element is called TOC3, and it has a style too. The attribute: STYLE-;display~none’ tells Internet Explorer not to display the element. The entire document will be doWcloaded to the client computer, but it won’t be displayed because of the STYLE attribute
As you probably guessed, we must supply the code to hide and display the list each time the visitor clicks the Mastering hotspot. The Mastering section is called Head3. Therefore, we must supply an event handler that will react to the onClick . event of the Head3 object:
Sub .Head3_on~l;ek()”.
If TOC3.style.display – ” Then
TOC3.style.display – ‘none’
Else
TOC3.style.display – ”
End If
End Sub
This event handler is invoked when the visitor clicks the Mastering hotspot. It examines the value of the dis{>layattribute of the TC>C3element. If the TOC3 element is visible (its display attribute’s value is empty), the code hides it by setting it to none. If not it displays the element by setting its DISPLAYattribute to an empty string.
Notice that in.addition recording to the mouse click event the various shot spots react. to the move rhenf of the mouse.Every time you move the pointer over cf Series name the name o~the seriesand its description turn red. When the pointet is’-~Oved ‘~over another series, the previously-highlighted orie is reset to black. Each series is a separate object, so all we have to do is change the,color of the object.
The two subroutines tha.t detect when the pointer moves, in or out the area of the ‘. Head3’ element are the Head3″:’on Mouse Overo and Head3_on Mouse Out() functions. Wemust use these subroutines to.change the color of the Head3 element so that when the pointer hovers overit, the text.color is red, and when it leaves the area, the text color is reset to black. Hen: are the definitions of the corresponding event handlers
Sub .Head3~noMous~Overp~
-,; Head3.style.color:·”; “.’FF3300” ; –
End’Sub
S~b Head3_onMouseOut()
Head3.style co.1or-“-. #QOOOOO.”
End Sub
DHlML is nothing more than programmable HTML When building a Web page with DHlML you’re basically an HTML document and you must make sure that each section of the document that reacts to viewer actions is delimited witha pair of <PlY> tags, Everything that appears between them is a separate element and its attributes Can manipulated with VBScript statements.
To manipulate the element programmatically, you supply an event handler for each external action to which your document must react. The name of the event handler is <made up of the name of t;he’element you want to program (which is the value of the attribute of the corresponding <DIY> tag) and the event to which it must react.
