A Complete Guide to Web Design

436 Chapter 24 – Introduction to DHTML

DHTML Examples

Web Design in a Nutshell, eMatter Edition

Style Changes

Once you’ve created your browser detection code, making changes to style sheets

is relatively simple. All you have to do is access a style property and change it:

document."style_name".visibility = "visible";

This line of script changes thevisibilityproperty of a Netscape 4.0 layer to

visible. Controlling the visibility of an element allows us to have pictures or text

appear on demand. The same line for Internet Explorer 4.0 looks like this:

document.all."style_name".style.visibility = "visible";

To execute either line of code depending upon the user’s browser, you would

wrap them in conditional statements like this:

if (isNet4)

{

document.hidden.visibility = "visible";

}

if (isIE4)

{

document.all.hidden.style.visibility = "visible";

}

The firstifstatement checks to see if the browser is Netscape 4; if it is, then the

Netscape 4.0-specific code between the curly brackets executes. The secondif

statement checks theisIE4variable. If that variable istruethen the Internet

Explorer 4.0-specific code between the curly brackets executes. In either case, the

visibility property of the style or element namedhidden is madevisible.

If you have a style sheet that looks like this:

<STYLE TYPE="text/css">

#hidden {position: relative; font: 12pt Times, serif;

visibility: hidden;}

</STYLE>

You must specify thepositionattribute for a CSS object to be

accessed by JavaScript. In this case relative means the text

appears as positioned by traditional HTML. Designating the position

asabsolutewould put the text identified ashiddenin the upper

left corner of your browser.

The JavaScript code that accesses thehiddenobject and changes itsvisibility

property fromhidden tovisible would look like this:

<script language="Javascript1.2">

var isNet4, isIE4

// Variables that you reference for browser type.

//

// Begin the browser detection script.

if ( navigator.appVersion.substring(0, 1) >= 4)