 | |
| 1.4 | Hiding and Showing Layers |
| |
| 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.
| ||
| 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 |
| ||