Chapter 12: Dynamic HTML in Early Browsers

Overview

The term Dynamic HTML (DHTML) has rather a loose meaning, but essentially its purpose is to allow the elements and contents of a web page to be dynamically changed after the page has been loaded into the browser. For example, it can be used to change the size of text as the mouse pointer rolls over it. However, in addition, it also aims to enhance user interaction by making many more HTML elements respond to user actions.

In plain HTML, we can define what a page will contain and the appearance of its contents. However, after the page is built and downloaded to the user's browser, that's it. No changes can be made to the page's content or appearance. However, using DHTML we can change the appearance of existing content, add new content, and even remove content. You want some text added inside a table? You got it. You want a heading to change color as the user's mouse pointer rolls over it? You got it.

JavaScript provides us with a means of writing DHTML pages. We've already seen this in action with the example in Chapter 5 where we enabled the user to change an image loaded into the page with the click of a button. The latest browsers go beyond this, and in the case of Internet Explorer 4.0+ and NN 6 and 7 we can now change virtually anything in a page. Also, nearly every tag in Internet Explorer is represented by an object with a large selection of events that make interacting with the user much easier.

However, the bad news is that the way DHTML is supported by Netscape Navigator 4.x, Internet Explorer 4.0+, and NN 6+ browsers is very, very different, mainly because we use many of the objects in the Browser Object Model (BOM) to enable us to write Dynamic HTML. Although the parts of the BOM that we have seen so far have been mostly the same, many BOMs for the two browsers have large differences. While we'll occasionally find apparent similarities, these are actually sometimes misleading. For example, both IE 4.0+ and NN 4.x have the event object in their BOM and we may think this a wonderful ray of hope for compatibility, until we realize that they are very different objects.

We can create a singing, dancing DHTML page for IE, only to find that making it work in NN 4.x is either impossible or requires a total rewrite. Perhaps even worse, DHTML pages written for NN 4 fail badly in NN 6. We have essentially two choices: keep things simple, but limited, so that they are cross-browser compatible, or go for dazzling pages, but accept that it's most likely that we'll need to write a different version for each browser. Obviously, each of these strategies has advantages and disadvantages.

In this chapter we'll be looking at the DHTML possible with Internet Explorer 4.0+: how we can change things, add things, and move things around the page. We'll also look at how we can create a dynamic menu system, where the menus appear and disappear as we move the mouse pointer over a series of images.

Next we'll turn our attention to Netscape Navigator 4.x. We'll investigate how to use DHTML to create dynamic web pages on this browser, and have a look at how we can achieve a dynamic menu example with similar functionality to the IE version.

Note

It is possible to write DHTML for the Netscape 6 browser, but this browser does not support the same BOM as Netscape 4.x. Instead it abides by the W3C Document Object Model (DOM). We will be seeing more on this in Chapter 13.

Finally, we'll see how we can make DHTML for IE 4.0+ and NN 4.x cross-browser compatible.