This chapter is from the book
This chapter is from the book
This chapter is from the book
Toggling Netscape's Layers
First Things First: This is a tutorial dealing with Netscape Layers. You need to be running a Navigator browser, 4.0 level or better, to see the effect.
You can find this tutorial, and all of its examples, online at http://www.htmlgoodies.com/beyond/toggle2.html.
You can download just the examples at http://www.htmlgoodies.com/wpg/.
This tutorial is one of a pair that offers the same effect, but uses totally different methods to get the job done. If you haven't already, you should take the time to read over this tutorial's twin, "Toggling with MSIE." The toggling effect, an item being made able to appear and disappear, is done in MSIE by using a division. In this Netscape-based tutorial, we'll get the same effect by getting a layer to toggle.
If you have read the other tutorial, I think you'll find that this one is a whole lot easier to understand.
The Effect
Figures 3.22–3.24 illustrate the effect. You'll recognize it from the tutorial just before this one. Remember to pay close attention to the differences in the figures to really understand what's happening.
Here is the full code—I'll break it down as the tutorial goes on:
<LAYER NAME="layer1" visibility=hide bgcolor="ff00ff" WIDTH="100" HEIGHT="100" TOP="75" LEFT="450"> <center><br><br>Ta Da!</center></LAYER> <A HREF="http://www.htmlgoodies.com" onMouseOver="document.layer1.visibility='show'" onMouseOut="document.layer1.visibility='hide'"> Go to Goodies</A> <FORM> <INPUT TYPE="button" VALUE="Let Me See It" onClick="document.layer1.visibility='show'"> <INPUT TYPE="button" VALUE="Take It Away" onClick="document.layer1.visibility='hide'"> </FORM>
)
Figure
3.22 Notice my pointer is off the text "Go to Goodies."
)
Figure
3.23 Now the pointer is on top of the text, and the box popped up.
)
Figure
3.24 I've gotten the box to pop up now by using the button. Notice
that the other button will take it away.
The Layer
The layer itself carries with it all the stuff needed to place it and make it disappear. It's a one trick pony, but it turns that trick so well as emphasized here:
<LAYER NAME="layer1" VISIBILITY="hide" BGCOLOR="ff00ff" WIDTH="100" HEIGHT="100" TOP="105" LEFT="450">Ta Da! </LAYER>
If you haven't noticed already, dig that VISIBILITY="hide". That's what makes the layer invisible. VISIBILITY="hide" hides the layer.
All I've got in the layer is a background set to purple and the words Ta Da!. I'm a clever fellow.
The other parts I'm interested in pointing out to you are the TOP and LEFT settings. It's my opinion that this effect literally hinges on the correct positioning of the layer. I've seen the effect so that each layer comes up near the element it is supposed to work with, and I've seen the effect in which the layer comes up somewhere far away from the element that caused it to appear. I also like the look of multiple layers popping up and disappearing due to multiple mouse rollovers. However, each layer popped up in the exact same place. It was like a billboard. It looked great. So when you set this up for yourself, remember that positioning is king.
I also wanted to make sure that you saw that the layer was given a name. In this case, it's layer1. I again made the name up all by myself.
You'll also note that there's an end layer flag. You need that.
Actually now that I've looked over the text, heck, I've pointed out just about everything. Eh, it'll help you later.
Getting the Toggle Effect
The entire effect revolves around a JavaScript hierarchy statement meant to point an Event Handler right at the layer in question. Remember, the layer has a name, layer1. Later we'll talk about getting multiple layer toggles. Then the name of the layer becomes quite important.
Here's the code that made up the first hypertext link in the example:
<A HREF="http://www.htmlgoodies.com" onMouseOver="document.layer1.visibility='show'" onMouseOut="document.layer1.visibility='hide'"> Go to Goodies</A>
This is the JavaScript hierarchy statement that makes the magic:
document.layer1.visibility='show'
And here's its counterpart:
document.layer1.visibility='hide'
The first makes the layer visible. The second makes the layer disappear. Notice that the code is very similar to the code used in an image flip. An onMouseOver and onMouseOut Event Handler is used to enact the hierarchy statement. When the mouse passes over, the layer appears. When the mouse moves off, the layer is hidden. It's just like magic except without the seven beautiful assistants and the disappearing tiger.
The Button Code
As you probably noticed, there are also two form buttons that get the effect. They work the same way incorporating the hierarchy statements, except the buttons use an onClick handler to get the job done. Here's the basic code:
<FORM> <INPUT TYPE="button" VALUE="Let Me See It" onClick="document.layer1.visibility='show'"> <INPUT TYPE="button" VALUE="Take It Away" onClick="document.layer1.visibility='hide'"> </FORM>
Multiple Toggling Layers
As promised, let's talk about toggling multiple layers. Imagine a long line of links down the left side of a page. It would look great if you could get a new layer to show up every time the mouse passed over the next link. It would look like a glorified series of image flips.
The effect is not hard, but it does require some attention. You'll obviously have to create a new layer code for each layer you want to pop up. I would assume that they're all probably going to say different things.
You'll need to set new TOP and LEFT positions unless you want all the layers to appear in the same location (which isn't a bad look actually).
But most of all, you will have to assign each layer a different name. They cannot all have the same name. Think up new names for each layer! (Did that drive the point home?)
Now, after you have new names for each layer, you can create a JavaScript hierarchy for each individual layer. If you have a layer named bob, you would use the hierarchy statements:
document.bob.visibility='show'
and
document.bob.visibility='hide'
to affect that bob layer.
Now imagine that you create a second layer named george. The hierarchy statement you created for bob will not work for george. You need to use new george-ready hierarchy statements. They'll look like this:
document.george.visibility='show'
and
document.george.visibility='hide'
Every time you create a new layer, you need to create new hierarchy statements. Then you can set links and buttons to toggle just the right layer.
And how much fun will that be?