Uncle Jim's Web Designs and Tutorials

This is part two of a series on Dynamic HTML


Getting Started:

Think of DHTML as not a singular technology but a combination of three existing technologies meshed 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.

JavaScript accesses the properties of an HTML document 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. The basic object in DHTML is a named rectangular region, whose method of declaration and javascript reference can and does differ depending on the browser involved.

Do I have to learn another language?

DHTML is NOT a scripting language like Javascript, but merely a browser feature, or enhancement, that gives your browser the ability to be dynamic. What you really want to learn is not DHTML itself, but rather, the syntax needed to use DHTML. It is the ability of the browser to alter a web page's look and style after the document has loaded.

Here's a simple demonstration. The below text changes color when the mouse moves over it:

Move your mouse here

This is what the code looks like:

<span id="sometext"
onMouseover="sometext.style.color='red'"
onMouseout="sometext.style.color='black'">Move your mouse here</span>

In order to get this effect, I first gained access from the element's ID. Then, through the style object, and finally the style's color property. All style properties are read/write, and are accessed in a similar manner: element id->style object->property name.

Here's another example that expands an image when the mouse is over it, and reverts it back to its original size when the mouse moves out:

This is what the code looks like:

<img id="aimage"
    src="piza.gif" onMouseover="enlarge()"
onMouseout="revertback()">

<script language="JavaScript1.2">
    function enlarge(){
aimage.style.pixelWidth=28 aimage.style.pixelHeight=28 } function revertback(){ aimage.style.pixelWidth=14 aimage.style.pixelHeight=14 }
</script>

The image changes dimensions on demand, without the need to reload the document. That's something JavaScript can not accomplish by itself.

Accessing CSS using Javascript

JavaScript accesses the style properties of the content block in the following ways:


This means that, following the object and property specifications defined by the DOM, JavaScript can access the style sheet properties of the content block.

Dynamic Styles:

As you've seen, positioning a content block is a form of style sheet. However, there are other uses for style sheets aside from placing blocks on the page. Style sheets (aka Cascading Style Sheets or CSS) can be used to define any set of styles which may apply to certain HTML elements or block of HTML. Like JavaScript, Cascading Style Sheets are their own in-depth web authoring topic. Because our focus is on DHTML, insofar as it uses and combines web authoring technologies, this isn't the place for a detailed tutorial on creating styles or style sheets.

In brief, there are several ways to apply styles using style sheets. You can define styles which apply globally to all HTML elements of a certain type. For instance, you might create a style sheet which specifies that all <H3> elements be bold (font-weight) and red (color).

You may also define style "classes," which are predefined styles applied to an element on-demand. For example, you might specify that the style class "redbold" contains the styles bold (font-weight) and red (color). This redbold class would only apply to elements in which you demand it; e.g. <BLOCKQUOTE CLASS="redbold">

Lastly, as you've already seen, you can define and apply styles on-the-fly, using the STYLE attribute for an element tag; e.g.

<H4 STYLE="color:red; font-weight:bold;">.

These on-the-fly styles apply only to the tag in which they are specified.

Is this supported by most browsers?

FireFox, Microsoft Internet Explorer and Netscape all support CSS as described above, although FireFox and Microsoft both support additional style properties which do not exist under Netscape. The critical difference between the browsers, however, is the degree to which their CSS support is dynamic.

This is essentially how DHTML works. However, you should understand there are a myriad of attribute properties for text, images, documents and windows properties, some of which are not supported in all browsers. Sometimes, accessing a specific property requires a few more hurdles.

Next, we discuss the Document Object Model