Credit: J. Trauger (JPL/NASA)
What is DHTML?
DHTML stands for Dynamic HTML. When implemented in full it allows complete
control of all the structures and contents of a Web page by exposing
every part of the Document Object Model (DOM) to control by JavaScript.
Thus the position, visibility, color, size, content, etc of every aspect
of a
web page can be dynamically controlled.
Browser Differences
No current browser adheres strictly to the standard but Mozilla comes very
close, and it is the goal of Mozilla to achieve full compliance. However,
since IE 6 is still the most widely used browser we will base most of our
examples on it, even though it differs significantly from the standard.
The DHTML in older versions of Netscape (e.g., Netscape 4.7) is very
different and very limited and we will not discuss it here.
There are several ways to write DHTML that is
compatible with different browsers:
- You can use the "Navigator" object to detect the type of
browser and then branch to different pages depending
on which browser and version it is
- You can switch to different sections within a page depending
on which browser it is
- You can develop an applications interface (API) which fields
generic calls and then selects the implementation based on
which browser has been selected.
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 =container of object
window.event.clientX [Y] =coord of event wrt window
window.event.offsetX [Y] =coord wrt container
obj.style.left =left pixel coord of obj
obj.style.top =top pixel coord of object
document.all.obj.style =the css part of object
document.attachEvent("onmousedown", fcn) =fcn when mouse is down
document.attachEvent("onmousemove", fcn) =fcn when mouse moves
document.attachEvent("onmouseup", fcn) =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
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
- Simple maniplation of
an image using Mozilla and IE compatible code.
- Using a mouse to
move
an image (Internet Explorer only).
- Using a mouse to
move an image (as above but only for Netscape/Mozilla).
- Creating a
pathway (Internet Explorer only).
