Posted Saturday, December 4, 2004
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.
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
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)
In Netscape the address to the DIV layer "myLayer" is
in Explorer it is
The W3C way of identifying the address is
To access the properties such as visibility under "myLayer" you would use these addresses.
document.myLayer.visibility = "visible";
document.all.myLayer.style.visibility = "visible";
Now the previously hidden layer is now visible. This is essentially how DHTML works, but understand there are hundreds and hundreds of attribute properties for text, images, documents and windows. Not all these properties are supported in both browser and sometime accessing a property requires a few more hurdles, but if you stick to the common denominator properties both browser use then life it a bit easier. I recommend the excellent DHTML reference book Dynamic HTML - The Definitive Guide by Danny Goodman (O'Riley Books) It lists all of the DHMTL properties and their cross browser compatibilities.
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.