A Complete Guide to Web Design

The Document Object Model 433

DHTML

The Document Object Model

Web Design in a Nutshell, eMatter Edition

To access an image object contained within a style object, you needn’t reference
the style object. You should reference it directly through the image object’s name.
So, to reference the image namedstart, type:

document.all.start

Object Properties

Another difference between Netscape and Internet Explorer’s implementation of
the DOM is in property names.

Every object contains properties. Properties are different for every object but are
typically descriptors such as color, size, position, etc. Referencing yet another
branch in the DOM can access these properties. Image objects in an HTML page
have a source property, which is the image’s path or URL. Here’s how we would
reference thestartimage’s source file:

document.images.start.src

By accessing and manipulating an image’s source property, you can create effects
such as rollovers (see Chapter 22).

Because Netscape and Internet Explorer don’t agree on the names of object prop-
erties, you must program for properties that Netscape and Internet Explorer have
in common.

There are three properties for positionable objects that Netscape and Internet
Explorer share:

• Location


• Visibility


• Stacking order (z-index)

Location

You can control an object’s location through its X and Y coordinates. These two
properties are named differently by Netscape and Internet Explorer. In Netscape, a
positionable object’s X coordinate is calledleftand its Y coordinate is called
top. To access a positionable object’s X coordinate in Netscape you could write:

document."layer_name".left

To access an object’s Y coordinate in Netscape you write:

document."layer_name".top

Internet Explorer’s positionable objects have these same properties but they are
referred to through different names. In Internet Explorer, a positionable object’s X
coordinate is calledpixelLeftand its Y coordinate is calledpixelTop. To access
a positionable object’s X coordinate in Internet Explorer you would use the
pixelLeft property:

document.all."style_name".style.pixelLeft

To access an object’s Y coordinate in Internet Explorer you write:

document.all."style_name".style.pixelTop