Web Design in a Nutshell

DHTML Examples

This section provides two DHTML examples. The first shows how DHTML can be used to hide or show an object. The second example uses DHTML to add motion to a page. In addition, this section discusses the measures that must be taken to make sure the DHTML works with both major browsers.

These examples are intended to introduce you to the basics of DHTML. They are by no means a compilation of all possible DHTML functions and they do not work with or handle Netscape and Internet Explorer browsers below version 4.0. It is possible to detect 3.0 browsers and send them non-DHTML content, but that is beyond the scope of this chapter. If you are interested in learning how to do that, go to the web sites listed at the end of this chapter.

Though the following examples are simple, mixing these different functions or expanding upon them can add a lot to your web pages.

Browser Detection

The examples in this section require that you first check for the user’s browser type and version. This allows you to identify the viewer’s browser and execute the browser-specific JavaScript code. Each of the example scripts should begin like this:

<SCRIPT Language="JavaScript1.2">
var isNet4, isIE4
if ( navigator.appversion.substring(0, 1) >= 4)
{
    if ( navigator.appName == "Netscape" )
   {
      isNet4 = true;
   }
    if ( navigator.appName == "Microsoft Internet Explorer" )
   {
      isIE4 = true;
   }    
}
</SCRIPT>

This code checks the ID of the browser and sets as true a variable for that browser, either isNet4 (Netscape) ...