An Introduction to Dynamic HTML (DHTML)

Quite frequently, you want some type of trigger to cause your DHTML to kick in. Whether repositioning blocks or changing style properties, some event usually causes these changes.

Many different types of event can occur on a Web page, most of them caused by the user. He or she might click on a button (click event), might move the mouse over an element (mouseover event), or move the mouse off of an element (mouseout event). The user may submit a form (submit event) or resize the browser window (resize event). Additionally, some events occur without direct user intervention -- the page may finish loading (load event), for example.

Events, although an intrinsic part of DHTML, are not part of the standard DOM Level 1 specification. Consequently, event handling between Microsoft and Netscape browsers can vary enormously in practice. The DOM Level 2 specification does include events, but unfortunately as of this writing, DOM Level 2 support in both major browsers is still more of a dream than a reality.

Managing events can be relatively simple or quite complex, depending on the ambitions of your project. Since this is an introduction, we'll focus mainly on event basics. Fortunately, basic events are handled most similarly between browsers.

Event Handlers

Events occur on a Web page whether you choose to act on them or not. When the user moves the mouse over an element, a mouseover event occurs. If you would like to leverage this event as a trigger for some dynamic action, you must construct an event handler.

An event handler is created as an attribute for the tag which defines the element at which you wish to catch the event. Event handler attribute named follow the syntax onEventname, and they accept JavaScript statements as their action. For example, the following tag creates a hyperlink with a mouseover event handler specified.

<A HREF="page.html" onMouseOver="changeStatus('Read this page');">Click here</A>

The onMouseOver event handler catches a mouseover event. When this event occurs at this element, a JavaScript function is called named changeStatus(). This is a fictional function, you can imagine that it might exist to change the message on the browser's status bar. Any JavaScript statement is allowed in an event handler, so we could also execute direct statement rather than call a function. For example, suppose that a mouseover for this element in MSIE should modify a style sheet's color property:

<A HREF= "page.html"onMouseOver="document.styleSheets[0].rules[0].color='blue'">Click here</A>

The above example assumes MSIE, since live style sheet modifications aren't supported in Netscape. We also assume that a style sheet exists in this document! But, hey, it's just an example.

Once again, a convenient table will help summarize the common event and their event handler names.

Event	Event Handler Syntax	Description
click	onClick	User clicks (left) mouse button on an element.
submit	onSubmit	User submits a form, this event fires before the form submission is processed.
reset	onReset	User resets a form.
focus	onFocus	User brings focus to an element either via mouse click or tabbing.
blur	onBlur	User loses focuses from an element by clicking away or tabbing away.
mouseover	onMouseOver	User moves mouse over an element.
mouseout	onMouseOut	User moves mouse off of an element.
mousemove	onMouseMove	User moves mouse.
change	onChange	User changes value in a text, textarea, or select field.
select	onSelect	User selects (highlights) a portion of text in a text or textarea field.
resize	onResize	User resizes browser window or frame.
move	onMove	User moves browser window or frame.
load	onLoad	Page completes loading.
unload	onUnload	User exits page (by navigating to a new page or quitting browser).
error	onError	An error occurs loading an image or document.
abort	onAbort	User stops an image loading using the stop button.

The above table is a quick reference guide. There are some important caveats to keep in mind. For one, this is not a comprehensive list of all events, although these are by far the most commonly used. Both browser support additional events for detecting keypresses and other mouse actions, while MSIE supports additional events above and beyond Netscape's. Secondly, you must keep in mind that not every event is applicable to every element. This also varies between browsers. For example, within Netscape a mouseover event only applies to a hyperlink <A>, area <AREA> or layer <LAYER>. Yet, within MSIE, you can apply a mouseover event to almost any element, including images <IMG>, and paragraphs <P>.

In general, the above rule holds between browsers: Netscape restricts each event to certain limited elements, while MSIE allows most events to be handled at most elements. The best way to clarify these distinctions is to read the documentation -- Netscape's Events and Event Handlers and Microsoft's DHTML Events Reference.

Mastering event handling is most certainly a topic unto itself, a topic which we will cover in more browser-specific detail in a future article. At the surface, handling basic events is simple, as you've seen. The classic "rollover effect" is a perfect example of a simple event used in DHTML. A rollover occurs when the user moves the mouse over an element; while the mouse hovers over the element, its appearance changes to reflect that it is "active". When the mouse moves off the element is reverts to a more subdued state. Rollovers commonly use changes in either image or style. Below is a basic MSIE style-based rollover, which makes the "active" text red and bold, and returns to normal blue when inactive. Remember that such dynamic styles don't work so easily under Netscape, although you could certainly re-imagine this example for Netscape, perhaps by swapping an image for the rollover effect; or swapping a layer.

MSIE Dynamic Style Rollover Example

<A HREF="special.html" TARGET="mainframe" STYLE="color:blue;font-weight:normal;font-family:Arial"<BR>onMouseOver="this.style.color='red';this.style.fontWeight='bold'"<BR>
onMouseOut="this.style.color='blue';this.style.fontWeight='normal'">Today's special</A>

Conclusion

As with any introduction, we hope that much of what's been written serves as inspiration for your own ideas. Coding impressive DHTML is not necessarily obscure or difficult, but it does benefit from imagination and cleverness. No doubt you'll find plenty of pre-built DHTML effects in your Web travels, and these, too, are useful sources of inspiration and programming techniques. Always approach an interesting effect with a "How'd they do that?" mindset, rather than simply adopting what they did.

Because DHTML is a moving target, as a developer you necessarily need to be sensitive to the browser environment that you are designing for. This is a major reason why cross-browser coding is such a challenge. The promise of a standardized DOM adopted by both browsers seems an ever distant possibility, even with fifth generation browsers. Intranet developers who have the relative "luxury" of a single browser platform can enjoy some additional freedom from the strain of balancing multiple browser environments.