The <LAYER> HTML tag is a Netscape Navigator-only tag that you can use to display overlapping information in the browser. You can take advantage of this feature to provide online help to your Web page's users. The sample page is designed to run in Netscape Navigator only.

Layers are essentially boxes that float above your Web page. You can define the placement of the layer through X, Y, and Z planes. You use the LEFT and TOP properties of the <LAYER> to define the X and Y positions, respectively. You use the Z-INDEX property of the <LAYER> to define the Z position. Using the Z-INDEX property, you can stack <LAYER> tags upon other <LAYER> tags. <LAYER> tags with higher Z-INDEX property values will cover <LAYER> tags with lower Z-INDEX property values.

You can use this positioning feature for many purposes, but one of my favorite ways to use it is to provide users with a pop-up help window. There are also other ways to provide help windows, including the <IFRAME>, opening new windows, Java applets, and ActiveX controls. However, using the <LAYER> tag is among the easier ways to provide help.

The properties of the <LAYER> tag include:

• POSITION
• ID
• LEFT and TOP
• PAGEX and PAGEY
• SRC and source-include
• Z-INDEX, ABOVE and BELOW
• WIDTH
• HEIGHT
• CLIP
• VISIBILITY
• BGCOLOR and BACKGROUND-COLOR
• BACKGROUND and BACKGROUND-IMAGE

Events of the <LAYER> tag include:

• OnMouseOver
• OnMouseOut
• OnFocus
• OnBlur
• OnLoad

You can use a touch of client-side script to show and hide the <LAYER> when your users click on your 'Help' button. For example, if you create a 'Help' button like this:

<INPUT type="button" value="Help" id=cmdShowHelp name=cmdShowHelp 
LANGUAGE=javascript onclick="return cmdShowHelp_onclick()"> 

and you create a layer as follows:

<LAYER ID=HelpText TOP = 50 VISIBILITY = hidden BGCOLOR = sienna LEFT = 50px Z-Index = 2>
HELP TEXT GOES HERE
</LAYER> 

then you can show or hide the help text window with this script:

function cmdShowHelp_onclick() {
	// DECLARE A COUPLE OF VARIABLES
	var currentVisibility;
	
	// SET THE VALUE OF THAT VARIABLE TO THE VALUE OF THE 
	// <FRAME> CURRENT VISIBILITY STATUS
	currentVisibility=document.HelpText.visibility;
	
	// TOGGLE THE VISIBILITY STATUS BETWEEN 'SHOW' AND 'HIDE'
	if (currentVisibility == 'hide') {
		currentVisibility = 'show' 
	}
	else{
		currentVisibility = 'hide' 
	}
	
	// RESET TO THE NEW VISIBILITY STATUS
	document.HelpText.visibility=currentVisibility;
	
	return false;
}

The script uses the Document Object Model to retrieve the value of the visibility property of the HelpText LAYER. When it retrieves that value, it tests it for 'show' or 'hide'. If the value of the visibility property is 'hide', the script resets the visibility property of the HelpText LAYER to 'show'. Otherwise, it resets the visibility property of the HelpText LAYER to 'hide'.

This solution is an easy way to provide your Web pages with a simple Help window (click here for sample page). Remember, though, <LAYER> is a Netscape Navigator-only tag. However, it is possible to provide similar functionality to pages viewed in Internet Explorer using the <IFRAME> tag. The IFRAME (Inline Frame) is similar to a standard frame in that it can display an HTML page within the borders of the frame but it is different in that the <IFRAME> is a stand-alone element and can be positioned anywhere on the page. The look of an <IFRAME> is similar to the look of the <TEXTAREA> control in that a rectangle is displayed on the page and within the borders of the rectangle is content and (if needed) scroll bars. An in-depth explanation of the use of the <IFRAME> is beyond the scope of this article, but a simple example follows. Note that the SRC property defines the page that will be displayed in the <IFRAME>. Try this example on a page that you will view in Internet Explorer 4.0+.

<IFRAME SRC="HelpPage.htm">
This text will only appear if the browser does not support the
&lt;IFRAME&gt;
</IFRAME>