• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Introducing DHTML

One of the most confusing things about DHTML is that while you would expect it to be a unified, coherent technology like JavaScript or Flash, it is not so straightforward. This two-page crash course in DHTML should be enough to get you up and running.

Historical Background

DHTML dates back to 1997, when key aspects of the technology officially became part of the HTML 4 specification. HTML standards are set by the W3 Consortium, a group of industry leaders who define, in part, the future of Web technology. In theory, the process works as follows: An individual or a group proposes a new technology; the technology is developed and tested; the technology is then adopted as a part of a standard specification. Once that happens, new browsers adopt the new standards and technologies. But it doesn't always happen that way. Browser makers can short-circuit the process by introducing “enhancements” of their own, without the blessing of the W3 Consortium. (This was prevalent during the so-called browser wars between Netscape Navigator and Microsoft Internet Explorer.) These enhancements create all manner of compatibility nightmares, and they are studiously avoided in this book.

The HTML 4 specification was first adopted in Netscape 4.x and Internet Explorer 4, so a site built with DHTML will require a 4.0 or higher browser. As it turned out, Internet Explorer 4 and 5 were more compatible with the HTML 4 specification than were Netscape 4.x versions. Netscape 6/Mozilla 1 has since caught up, so DHTML works a little more predictably than it did a couple years ago.

Defining DHTML and Layers

So what exactly is DHTML? To start, it's the loose umbrella term for the combination of HTML, CSS, and JavaScript. One of its key innovations was the improved ability to use objects—that is, page elements with customizable attributes. Once an object is declared, which means that it is added to the document and given a unique identity, its attributes, such as positioning and visibility, can be changed via scripts.

For example, CSS layers, with which you will work extensively in this lesson, are floating objects similar to the hotspots you created in Lesson 3. But unlike hotspots, layers can contain text and images, just as a regular HTML page can. And unlike a regular HTML page, layer attributes—such as visibility, positioning, background color, and contents—can be changed on the fly using a script. The implications for interactivity are pretty delicious: You can have a layer change in response to a user action without having to load a new page.

Understanding Interactivity: Events and Actions

Figuring out how DHTML works can get a bit hairy, but I will explain it in general terms. JavaScript, which is what does all the work, is an event-driven scripting language. This means that nothing happens until an event triggers it. Two broad categories of event concern us: those that happen automatically—for instance, when a page loads—and those that happen as a result of a user action, such as clicking, rolling over, or dragging.

When an event occurs, a JavaScript function or method is activated. Functions and methods are simply the script pieces that do something; for this reason, they are often likened to verbs. In an HTML page, they are stored at the top of the page, in what is called the document Head. By themselves, they just sit there, doing nothing. Something inside the main page needs to call, or activate, them.

Let's take an example. The Dante site has a graphic rollover at the top of the page. The action that JavaScript handles is the replacing of the Italian graphic image with the English one. But JavaScript doesn't decide when to do the swapping; it waits for the user to roll the pointer over it (this event in JavaScript is called onMouseOver). In the HTML body, where the default graphic is placed, there is a JavaScript call that says “whenever this graphic is rolled over, invoke the function called MM_swapImage().” Then the MM_swapImage() function takes over and causes the English image to replace the Italian one. Another event, onMouseOut, activates another function, called MM_swapImageRestore(), to return the page to normal, by replacing the swapped English version with the original Italian image, when the user rolls away the mouse.

Adding DHTML to the mix brings another layer of complexity (no pun intended): the layer as modifiable object. Rather than replacing one image or object with a whole different image or object, as with the rollover example, many DHTML functions change the various properties of a single object. Common layer properties include visibility, background color, and content.

Let's look at another example. In the first quiz question you will build, correct-answer feedback is stored on one layer and incorrect-answer feedback on another. Remember, a layer is a floating rectangular object that can contain text and images just as an HTML page can. Of course, the quiz would be awfully easy if users could see the correct- and incorrect-answer feedback on those layers. Thus, after you create the layers and add the explanatory feedback, you will set the layers' visibility attribute to hidden. When the page loads, the layers with the answer feedback will be hidden. Then, if the user clicks the correct link, a JavaScript function will change the visibility attribute of the corresponding layer to visible. Likewise, if the user selects an incorrect link, then the JavaScript will set the visibility of the appropriate layer to visible. (This clicking is known as an onClick event.)

This book will not teach you JavaScript; instead, we will use Dreamweaver behaviors. Behaviors do all the scripting work for you, and their interfaces let you specify the relevant parameters. Those parameters include which objects to change (in this lesson, you will use layers as your objects) and which properties of those objects you want to change. You can even modify the events that trigger these behaviors. The table below breaks down the whole process in terms of the sequence of events in the browser, where the code appears in your document, and who (either you or the Dreamweaver behavior) is responsible for writing the code.

Step What Happens Where in Document? Who Creates It?
1 The user clicks a link or hotspot The link or hotspot appears in the main body of the document, that is, between the <body> tags. You do, when you add a hyperlink to text or an image, or when you create a hotspot.
2 The onClick event is triggered. Most user events are attached to the <a> tag, while most automatic events (functions that are triggered when the page loads) appear as parameters inside the <body> tag itself. The event handler—the line of code that identifies the event and associates it with a function—is added automatically by the Dreamweaver behavior.
3 The JavaScript function that changes the object's property is called and run. The actual JavaScript functions and methods that do all the work are at the top of the document between the <head> tags. The Dreamweaver behavior adds all of the necessary JavaScript.
4 The object property is changed. The change occurs to the object (usually a layer) that you created in the document. You created the object, and in the dialog box used for adding the behavior, you also selected the objects and attributes to be modified. Dreamweaver put these parameters in the appropriate locations in the JavaScript and in the main document.
5 The user is presented with feedback; learning occurs. Learning occurs in your user's head, and her or his reaction may prompt further activity, setting the cycle back to step 1. Learning results from your ability to use technology to meet your learning objectives. Alas, Dreamweaver can't do everything!

Before moving on, consider two final points: First, all three of the quiz interactions you will build in this lesson, and countless other DHTML interactions you can create, work almost exactly the same way as the process outlined in the table above. Second, Flash ActionScript is based on the same specification as JavaScript, so almost all the concepts you learn here apply in Flash as well (with some tweaking of the terminology). That means if you learn even the bare minimum about how JavaScript works, you will have a huge leg-up on learning Flash's ActionScript. Conversely, if you learn ActionScript, JavaScript will be much less mystifying.

Are you ready to put all that theory to practice? To build interactive quiz questions, read on.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint