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:
If you haven't already, close the
other code window before opening this one. This is the JavaScript hierarchy statement that makes the magic:
document.layer1.visibility='show'And it's counterpart:
document.layer1.visibility='hide'
The first makes the layer visible, the second makes the layer disappear. Notice the code is very similar to the code used in an image flip (
So, You Want An Image Flip, Huh? (Part 2)
). An onMouseOver and onMouseOut Event Handler is used to enact the hierarchy statement. When the mouse passed 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 all the bird poop.
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 does require some attention. You'll obviously have to create a new layer code for each layer you want to pop up. They're all probably going to say different things I would assume.
You'll need to set new TOP and LEFT positions unless you want all of the layers to appear in the same location (which ain'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, since you have new names for each layer, you can create a JavaScript hierarchy for each individual layer. If you have a layer named "bob", then you would use the hierarchy statements:
document.bob.visibility='show' and
document.bob.visibility='hide'
...to affect that "bob" layer.
Now imagine 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?
And that's that. Good luck with the layer thing, and if you haven't looked yet, go see how to get the same look using DHTML with MSIE (
Toggling
).
[
Toggling
with MSIE]
This is a second full tutorial [The Effect] [The Layer]
[Getting the Toggle Effect]
Please note that this article also constitutes Part 3 of our "Layers" series. To view part 4 of that series see:
So You Want to Move A Layer, Huh?
