Platinum Edition Using HTML 4, XML, and Java 1.2:Advanced Netscape Dynamic HTML

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents


	When assigning multiple style characteristics to the same tag, you can use the JavaScript with instruction to reference the tag and then all styles inside the with instruction will be assigned to the tag. For the P tag assignments in Listing 25.1, you could have used the following abbreviated code:
	with (tags.P) {
	color = “blue”;
	fontFamily = “Verdana”;
	fontSize = “12pt”;
	fontWeight = “bold”;
	lineHeight = “20pt”;
	marginLeft = “80px”;
	}

Content positioning was introduced in Navigator 4.0 through use of the <LAYER> and <ILAYER> tags for absolute and relative positioning, respectively. Unfortunately for Netscape, using HTML tags to specify content presentation information flies in the face of the direction that the W3C wants to move—namely, to reserve HTML for describing the meaning of the content and to specify presentation through style sheets. The W3C rejected the Netscape proposal for the <LAYER> tag, and Netscape was forced to scramble to make Navigator compliant with the CSS approach to content positioning. Currently, Navigator supports both positioning techniques, although you should always consider developing according to the CSS specification because this will make your content more portable.

Figures 25.2 and 25.3 show a page done with Netscape layers. Each figure has two layers nested within an outer layer. The two layers, Layer A and Layer B in the example, are each made up of text with some style information attached. The containing layer has functions attached to its onMouseOver and onMouseOut events that toggle which layer is shown by manipulating their visibility properties. Figure 25.2 shows the onMouseOut condition, with Layer A visible. Figure 25.3 shows the onMouseOver condition, with Layer B visible. Note that the onMouseOver event is triggered even though it appears the mouse cursor is not over the layer. Because the onMouseOver event of the outer layer is used, more of the screen area of the browser window is included in it than just the visible inner layers. The HTML code for this example is shown in Listing 25.2.

FIGURE 25.2 When you open this page, it displays only one of two nested layers.

FIGURE 25.3 By clicking the layer, you instruct the browser to swap the hidden and displayed nested layers.

Listing 25.2 TogText.htm—Dynamic Content in Netscape Navigator Using Layers

<HTML>
<HEAD>
<TITLE>Toggling Text Using Layers</TITLE>
<SCRIPT LANGUAGE=“JavaScript”>
function layerUp(show,hide) {
   show.visibility = “SHOW”;
   hide.visibility = “HIDE”;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H1>Toggling Text Using Layers</H1>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
<HR>
<CENTER>
<LAYER NAME=togLayer
       onMouseOver=“layerUp(layerb,layera)”
       onMouseOut=“layerUp(layera,layerb)”
       VISIBILITY=INHERIT>
   <LAYER NAME=togLayerA
          STYLE=“font-family: Verdana; font-size: 48pt;
                 font-weight: bold; text-align: center;
                 color: blue; background-color: yellow”
          VISIBILITY=INHERIT>
      Layer A Text<BR>Switches to Layer B onMouseOver...
   </LAYER>
   <LAYER NAME=togLayerB
          STYLE=“font-family: Comic Sans MS; font-size: 48pt;
                 font-weight: bold; text-align: center;
                 color: yellow; background-color: blue”
          VISIBILITY=HIDE>
      Layer B Text<BR>Switches to Layer A onMouseOut...
   </LAYER>
</LAYER>
</CENTER>
</BODY>
<SCRIPT LANGUAGE=“JavaScript”>
var layera = document.layers[‘togLayer’].document.togLayerA;
var layerb = document.layers[‘togLayer’].document.togLayerB;
</SCRIPT>
</HTML>


	Netscape has many useful Dynamic HTML JavaScript routines available through its DevEdge site at http://developer.netscape.com/tech/dynhtml/index.html.

For all your hard work in coming up with attractive style information, you may end up having your effect lost on users who don’t have the font you specified in your style sheet. Rather than take chances on fonts a user may or may not have, you can bundle the font you want to use with a Web page and have it download along with the page. This assures both you and the reader that the page will display the way you wanted it to.

Figure 25.4 shows an example of a page that uses a downloaded font. The type face you see is used for Japanese language pages, one not commonly found on most users’ systems.

FIGURE 25.4 By downloading fonts along with a page, you ensure that readers see content the way you intended.

Now that you have the major ideas behind Netscape’s Dynamic HTML fresh in your mind, it is time to take a closer look at each one. The remaining sections of this chapter examine each idea in turn and provide you with more details about how to implement Dynamic HTML on your pages.

JavaScript Accessible Style Sheets

Netscape Navigator does support the CSS specification, and using the CSS approach is a perfectly good way to build style information into your documents. But, as you saw earlier in the chapter, Navigator also includes style properties in the browser object model, which means you can use JavaScript to access and set style characteristics. Netscape call this approach JavaScript Accessible Style Sheets; it is the first major feature of Netscape’s version of Dynamic HTML.

The advantage of JavaScript Accessible Style Sheets is that by using the browser object model, you can dynamically change style information by using scripts triggered by certain events that come about from user actions. This section focuses solely on the JavaScript implementation of styles so that you can be prepared to use them by themselves and also as part of content positioning.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.