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

• OnMouseOver—The OnMouseOver event is invoked when a user’s mouse pointer enters the layer.

• OnMouseOut—When the mouse pointer leaves a layer, the OnMouseOut event is fired.

• OnFocus—If the layer acquires keyboard focus (for example, a user clicks a form field in a layer so as to be able to type in it), an OnFocus event is triggered.

• OnBlur—Blurring refers to the loss of focus. When a layer blurs, Navigator invokes an OnBlur event.

• OnLoad—The OnLoad event is triggered when the layer is initially loaded.

Using these event handlers is the first step in making your positioned content dynamic. Depending on what JavaScript code you execute upon an event firing, you can change a layer’s content or move it to a new position to create an animation effect. You will read about some of the possibilities in subsequent sections of this chapter. However, you should first know about one other layer-related tag.

The <NOLAYER> Tag

Netscape knew it was creating proprietary tags when it introduced <LAYER> and <ILAYER>, so it also included a <NOLAYER> element for specifying nonlayered versions of layered content. You might use <NOLAYER>, for example, as shown in Listing 25.5.

Listing 25.5 NoLayer.htm Providing Alternate Content for Other Browsers

<HTML>
<HEAD>
<TITLE>Welcome to Our Site!</TITLE>
</HEAD>
<LAYER LEFT=50 TOP=35 ID=“layer1” SRC=“toplayer.html”></LAYER>
<LAYER LEFT=100 TOP=152 ID=“layer2” SRC=“bottomlayer.html”></LAYER>
<NOLAYER>
<BODY BGCOLOR=“white”>
<H1>Whoops!</H1>
You must not be using Netscape Navigator, so you’d probably be interested
in a <A HREF=“nolayers/index.html”>non-layered version</A> of our site.
</BODY>
</NOLAYER>
</HTML>

Netscape Navigator ignores anything between <NOLAYER> and </NOLAYER>, so it will render the preceding example just fine. A browser that does not understand the layer-related tags ignores the two <LAYER> elements and the <NOLAYER> element and displays the HTML between the <NOLAYER> and </NOLAYER> tags.

NOTE: When using layers, you don’t use the <BODY> tag in the document except between <NOLAYER> and </NOLAYER> tags.

Putting the “Dynamic” in Dynamic HTML with JavaScript

Everything you have read about so far in this chapter has largely been about how to create static content, so you might be wondering whether the term “Dynamic HTML” really applies. Now that you understand how to access style characteristics with JavaScript and how to use the <LAYER> tag to position content, however, you are ready to see how you can use JavaScript to make your pages come alive. This section gives an overview of some of the many things possible with JavaScript, layers, and style information.

• See “The Netscape Navigator Event Model,” page xxx. (chapter 24, “Introduction to Dynamic HTML”).

The capability to use JavaScript to create dynamic pages hinges on the Netscape browser object model, which provides for many different events and responses to those events. You read in Chapter 24 about the traditional events that Navigator supports and some extras added by Netscape to handle mouse, keystroke, and window events. Any of these can be used to trigger the execution of some JavaScript code in response to some kind of user action.

Two other aspects of the Netscape browser object model make Dynamic HTML possible. The first is the new event object that is created whenever an event occurs. As noted in Chapter 24, you can access properties of the event object to determine which kind of event was triggered, what mouse button or keystroke initiated the event, and to which object the event belongs.

The other helpful feature of the Netscape browser object model is that every layer—regardless of whether it was created using CSS properties or the <LAYER> tag—is accessible through the layers object. The layers object is actually an arrayed property of the document object, which means that you can reference a particular layer in the following manner:

document.layers[“layer1”]

This code says to select the layer named “layer1” from the layers array of the document object. You can also reference the array by a number if you know the layer’s position in the stacking order. If you want to make a direct reference to layer1, you could also say this:

document.layer1

NOTE: Only top-level layers in a document are listed in the layers array.

The properties of a layer selected from the layers object map very closely to the attributes of the <LAYER> tag discussed in the preceding section. Beyond those properties, one other thing could cause some confusion: Each layer has its own document property! A layer’s document property refers to the content inside the layer and not the main document. Other than that, you can use the document property just as you always have. Thus, to reference a <BLOCKQUOTE> tag inside a layer named “imagelayer,” you would use the following:

document.layers[“imagelayer”].document.tags.BLOCKQUOTE

This may not seem too bad, but your references can get fairly complicated if you have layers nested inside a layer. Suppose “layer2” and “layer3” are top-level layers nested inside “layer1.” Then, to reference the H5 tag in “layer3,” you would have to say:

document.layers[“layer1”].document.layers[“layer3”].document.tags.H5

Table 25.2 provides a full listing of the properties of a selected layer. Note that you can’t modify all the properties by using JavaScript commands. The layer’s parentLayer, for example, is a fixed property that cannot be changed.

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.