Summary

DHTML is a large topic, and we've only been able to touch on the basic foundations in this chapter. However, with this knowledge you can explore DHTML in greater detail and create more complex user interface tricks.

The main points this chapter covered were as follows:

• Style sheets can be used to set the style for various types of tags, or individual tags. We can also define style classes that we can apply to certain tags using the class attribute. Styles include the font, color, and position of a tag.

• DHTML allows us to change and add to page content even after a page has loaded. Netscape 4 and Internet Explorer have very, very different implementations of DHTML due to their differing Browser Object Models, and these implementations are generally incompatible.

• IE 4.0+ makes every tag in the page accessible and open to change after loading by associating an object with it. To be able to access this object we must give the tag a unique id attribute.

  • To change the appearance of tags after they have loaded, we can use the style object property of the object associated with a tag. We can use this to change any style for the tag.

  • Using the properties innerText, innerhtml, and outerhtml of a tag's object, we can alter the content inside a tag; the latter two for any HTML changes are re-rendered automatically.

  • Totally new content can also be inserted with the insertAdjacentText() and insertAdjacenthtml() methods of the tag's object. These allow us to insert new content before a tag's start, after its start, before its end tag, or just after its end tag.

  • IE supports a special global object, the event object. This is populated with useful information regarding the circumstances of an event. For example, what were the x and y positions of the mouse pointer at the time of the event? Which, if any, key did the user press, and which tags' objects are involved in the event?

  • We then created a dynamic menu system for IE based on the DHTML we looked at in the chapter. When a user rolled the mouse pointer over an image, a menu option with a list of menu items appeared from which the user could pick. If the user rolled off the menu without choosing an option, we hid the menu.

• NN 4.x takes a very different approach and bases much of its DHTML programming on the Layer object. We access most tags via the Layer object, which is created for them if they are positioned using style sheets. We can also create a Layer object directly using the <layer> and <ilayer> tags. The bad news is that Netscape 6 is not backward compatible with NN 4.x, so use of layers will not work on NN 6.

• Using the Layer object, we can move the content around the page after it has loaded. Moving a layer around involves the top and left properties, or the moveTo() and moveBy() methods. The order in which layers are stacked in a page is determined by the Layer object's zIndex property or moveAbove() and moveBelow() methods.

  • Layers are like mini windows on the page and, like a window object, they have a document property very much like the document object of a normal window. To change the content inside a layer, we first use document.open() and can then use the document.write() method to insert new content. After we have inserted new content, we must use the document.close() method, otherwise any further document.write()s will add to and not replace content.

  • NN also has an event object that is generated each time an event occurs. This object enables us to gather information about the event and any associated user input. However, it has a very different set of properties. The event object is only available in the event connection code, so care needs to be taken when connecting an event handler to a function that needs the event object.

  • Finally, we created a very similar DHTML menu system but in NN. We saw that the main change was that layers were central to its functioning.

• We ended the chapter by looking at ways in which we can write cross-browser compatible pages. This can be achieved in a single page by checking for an object's property that is supported in one browser but not another, or by redirecting the user to different pages depending on the browser being used.

In the next chapter, we will take a closer look at what can be achieved in IE 5.0+ and NN 6 browsers, which support the W3C Document Object Model (DOM) to varying extents.