A Complete Guide to Web Design

434 Chapter 24 – Introduction to DHTML

The Document Object Model

Web Design in a Nutshell, eMatter Edition

These properties return an integer indicating the number of pixels between the

top-left corner of the browser window and the object’s position. Thus, thetopor

pixelTopproperty of 200 positions an object 200 pixels below the document’s

top border.

Visibility

In both Netscape and Internet Explorer, a positionable object’svisibilityprop-

erty can be set tovisible,hidden,orinherit.What thevisibleandhidden

values do are self-explanatory. Setting an object’s position property toinherit

gives the object the same visibility as its containing object. In Netscape, a position-

able object’s visibility can be set to “visible” like this:

document."layer_name".visibility = "visible";

You can do the same in Internet Explorer like this:

document.all."style_name".visibility = "visible";

Stacking oder (z-index)

Stacking order or z-index works the same way in both Netscape and Internet

Explorer: the z-index property of the layer (Netscape) or style (IE) determines the

object’s place in the stack. Stacking order is set to an integer. A layer or style with

a stacking order of 1 will be placed above an object with a stacking order of 0.

You can set stacking order in Netscape like this:

document."layer_name".zIndex = "1";

In Internet Explorer it is set like this:

document."style_name".zIndex = "1";

Because of these fundamental differences in Netscape and Microsoft’s implementa-

tion of the DOM, you need to customize your HTML for each of the DHTML-

capable browsers; that is, you have to create two sets of JavaScript code. The

result is cross-platform DHTML.

Writing for Both Browsers

To write DHTML for both Netscape and Internet Explorer, you must create two

sets of JavaScript functions. The user’s browser will determine which set of functions

to use. If the viewer is using Internet Explorer, then the Internet Explorer-specific

JavaScript will be run. If the viewer is using Netscape, then the Netscape-specific

JavaScript will be run. See the “Browser Differences” section later in this chapter

for more information.

Although this is tedious, it isn’t as difficult as it sounds. Code written for one page

can be modified and reused for another. Also, if you’re really into JavaScript, you

can create your own interface for controlling DHTML objects and import them into

a document using an external.jsfile. An example of this is available on the

O’Reilly web site at http://www.oreilly.com/catalog/jscript3/example/text/17-4.txt.

This example is taken fromJavaScript: The Definitive Guide, by David Flanagan.