DHTML-Introduction by Eddie Traversa :: WebsiteDevelopmentNews

Html and CSS: DHTML-Introduction by Eddie Traversa
Thursday, May 12, 2005 - 05:45 PM

Think of DHTML as not a singular technology but a combination of three
existing technologies glued together by the Document Object Model (DOM):

1. HTML - For creating text and image links and other page elements.

2. CSS - Style Sheets for further formatting of text and html plus other
added features such as positioning and layering content.

3. JavaScript - The programming language that allows you to accesses and
dynamically control the individual properties of both HTML and Style Sheets.

The way JavaScript accesses the properties of an HTML document is through
the Document Object Model (DOM). The job of the DOM is to expose all the
attributes of HTML and Style sheets to JavaScript control. All you need to
know about the DOM is what JavaScript commands it accepts. Not that easy,
as different browsers have their slightly different versions of the DOM, so
they access HTML properties differently as well as display them differently.

So how do you locate an HTML element on a page and change its property?
This is the job of JavaScript. Obviously, I cant into all the details of
JavaScript or the DOM, but here is an example of how JavaScript can change a
visibility of a style sheet layer in both browsers.

Note: That every piece of HTML has a location much like a directory in a
phone book. When finding that piece of HTML you have to go through the same
hierarchy process of searching for a name in the phone book such as

(state) Washington -> (City) Seattle -> (Listings) j -> (Name) Jessica

In JavaScript, a reference to this would be equivalent to

washington.seattle.j.jessica

Now Jessica may have additional information such as her address and phone
number, so the JavaScript reference would be written this way.

washington.seattle.j.jessica.address

or

washington.seattle.j.jessica.phone

Lets transcribe the above metaphor to a DHTML document that contains a

layer [myLayer] with style attributes
[top,left,width,height,z-index,visibility,etc] and the layer contains a bit
of text "myText" (Note that the visibility attribute is set to hidden)

myText

Note: About the Author
Eddie Traversa
DHTML Nirvana http://nirvana.media3.net/ is a site
dedicated to exploring the possibilites of DHTML. It hosts free graphics,
dhtml templates and tutorials. Some of the tutorials emphasis is on
Flash/DHTML integration.