DHTML Examples 435DHTMLDHTML ExamplesWeb Design in a Nutshell, eMatter EditionIn an effort to solve DHTML compatibility problems, the W3C has drawn up
preliminary specifications for a DOM for both HTML and XML, but it will be some
time before these standards are expanded and become mainstreamed.
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 astruea variable for that
browser, eitherisNet4 (Netscape) orisIE4 (IE).
Now that we have tested the user’s browser and set our isIE4andisNet4vari-
ables, we can create two sets of browser-specific code, but only have the
appropriate set execute.