Dan's Layers Tutorial
1.4  Hiding and Showing Layers

When you're doing something with layers and javascript, it's best to just create the layers first, and check if they look right. For the next few examples, I will use the following layer:

<LAYER NAME="mylayer" LEFT=100 TOP=100 BGCOLOR=#FF0000 WIDTH=150 HEIGHT=150>
<FONT COLOR="#FFFFFF">This is my Layer</FONT>

Next you should write your JavaScript code. For this, I made 2 separate functions each to do only one task: to show the layer, and to hide the layer. I think this one's pretty self-explanatory:

<SCRIPT LANGUAGE="JavaScript">
<!--
function showlayer() {
	document.layers["mylayer"].visibility = "show";
}

function hidelayer() {
	document.layers["mylayer"].visibility = "hide";
}
//-->
</SCRIPT>

Then you have to incorporate some way to activate these functions. For most of the examples I will be using simple HTML links to activate them. But don't forget that you can start them any number of ways like onLoad or onMouseOver.

<A HREF="javascript:hidelayer()">hide</A> - <A HREF="javascript:showlayer()">show</A>

Just to make sure that you understand how each of these chunks are organize into an HTML page, I will show you the whole page (only this time though):

<HTML>
<HEAD>
<TITLE>1.4 Demo 1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showlayer() {
	document.layers["mylayer"].visibility = "show";
}

function hidelayer() {
	document.layers["mylayer"].visibility = "hide";
}
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF" LINK="#5555A8" VLINK="#BC4225">

<A HREF="javascript:hidelayer()">hide</A> - <A HREF="javascript:showlayer()">show</A>

<LAYER NAME="mylayer" LEFT=100 TOP=100 BGCOLOR=#FF0000 WIDTH=150 HEIGHT=150>
<FONT COLOR="#FFFFFF">This is my Layer</FONT>
</LAYER>

</BODY>
</HTML>

Notice that I put the script into the HEAD tag, this is proper place to put scripts but it's not absolutely necessary. Also, I did not put the simple links into a layer for readability purposes. Generally, when doing a page with layers everything, and I mean everything, should be in a layer.

Dan's Layers Tutorial
1.1 Introduction
1.2 Overlapping
1.3 Nesting
1.4 Using JavaScript
2.1 Sliding Layers
2.2 Pre-Built Functions
2.3 Clipping Layers
2.4 Looping Animations
2.5 Changing Images
3.1 Mouse-Click Animation
3.2 Capturing Keystrokes
3.3 Drag and Drop
4.1 Making Demos
4.4 Problems
4.5 Screen Sizes


Copyright © 1997 Dan Steinman. All rights reserved.