Credit: J. Trauger (JPL/NASA)
What is DHTML?
DHTML stands for "Dynamic HTML". It is currently a leading edge
development and, as such, suffers from a lack of standards and very
different
implementations. Its goal is to allow you to manipulate every element of
an HTML page though script languages, such as JavaScript.
The coming standard HTML 4.0 should solidify the standards so that
the differences between browsers are not so large and the elements are
stable. HTML used to be a very simple language, but no longer: the
reference guide for HTML in one publication is now 670 pages long.
Browser Differences
The differences between Netscape 4 and IE 4 or IE 5 are relatively
modest until
you use DHTML, in which case the differences are profound. IE 4/5 is far
more DHTML capable than Netscape 4 and IE 4/5 is much closer to the
emerging
standards of HTML 4.0. If you write DHTML for Netscape you can usually
(with some difficulty) convert it to IE 4/5, but going the other way
around
is almost hopeless as there are so many elements in IE 4/5 that have no
counterpart in Netscape.
There are several ways to write DHTML that is
compatible with both browsers:
Because IE 4/5 is much more developed in this area and is much closer to
the
emerging standard, we will only show DHTML for IE 4/5.
DHTML Concepts
The main concepts you need to learn for DHTML are Style
Sheets, named grouping elements, and
DHTML references
Style Sheets
Style sheets let you define a set of characteristics for a group of
HTML elements, such as color, font, position, and visibility. There are a
large number of style sheet elements, a number of ways of incorporating
Style Sheets, and a huge number of ways of applying them. For our
purposes we will confine Style Sheets to the format and content
as shown in the following example:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
#imageA {position:absolute; left:50;
top:150; width:120; z-index:100}
#mytext {border:solid blue 5 px;
color:green; background-color:coral}
#otherImage {position:absolute;
visibility:hidden}
</STYLE>
</HEAD>
. . .
</HTML>
Grouping Elements
Like Style Sheets, there are inumerable ways to define and manipulate
groups of elements, but for our purpose we will confine our choice to two:
the DIV and the SPAN elements. DIV
surrounds a complete set of elements (images, text, bullet lists, etc. and
any combination of such) and gives it a name so the set can be manipulated
as a whole. SPAN lets us delineate any section of the page, even inside a
single element. Examples include:
. . .
<DIV NAME=my_text >
Now is the time for all good men to come
to the aid of their party.
<IMG SRC="my.gif" >
</DIV >
Here is <SPAN ID=brash>very bold</SPAN> text
DHTML References
The last crucial step in using DHTML through JavaScript is knowing how to
reference objects and events. The following table contains the few that
we
need to know for the examples that follow (in the table the term "obj" or
"object" means the name of a specific object and not the literal word
"object"):
window.event.srcElement =obj activated by event
obj.parentElement.style =container of object
window.event.clientX [Y] =coord of event wrt window
window.event.offsetX [Y] =coord wrt container
obj.pixelLeft =left pixel coord of obj
obj.pixelTop =top pixel coord of object
document.all.obj.style =the css part of object
document.onmousedown =fcn when mouse is down
document.onmousemove =fcn when mouse moves
document.onmouseup =fcn when mouse is up
For example,
-
var my_image = window.event.srcElement
If an event occurs, such as a mouse passing over an image or a
piece of text, this returns the object activated by the event, for
a GIF image.
-
obj = my_image.parentElement.style
This returns the container of the object activated by the event.
For example, if a GIF image named "my_image" is contained in a DIV
element with an ID = XYZ, then a pointer to XYZ is returned by
this command.
-
if (obj == document.all.imageA.style)
dbg.document.write(" Selected Container for imageA)
This tests to see if "obj" is "document.all.imageA".
Examples of DHTML
