|
|
<script language="Javascript">
Hide/Show Multiple Layers in IE4-5, NS4-6
</script>
|
Written by
XBDHTML Guru
This is a more complex method of working with multiple layers. Attention will need to made to the layer naming convention, hide sequences, and Javascript Function design (what is the specific Function doing?).
This method of hiding and showing layers is designed to be used with layers that require related layers to interact with each other. For demonstration purposes, each layer here has been offset 10 pixels to the left from the previous layer and the layer z-index is increased.
Show All
Show Layer 1, Hide 2, 3, and 4
Show Layer 3, Hide 1, 2 and 4
Show Layer 4, Hide 1, 2 and 3
There are several parts to making this work:
DIV/SPAN defined style
This is defined within the embedded style portion at the top of the page. Each layer MUST have the same prefix (in this case: "sec") followed by a sequential number.
Javascript - Part 1
ALL JavaScript MUST be placed in the section of the page.
This is the browser detection routine that sets-up the DOM.
Javascript - Part 2
The code to HIDE a set of layers. You will need to repeat each IF/ELSE for each layer, incrementing the number as you proceed.
Javascript - Part 3
The code to DISPLAY a single layer and HIDE all other layers. Note the "HIDE" function is called first, and it also does NOT have a number assigned to it. This "hides" all layers globally (of the particular suffix set).
An Event
One of various events, onClick, OnMouseover, OnMouseOut etc, to call the pert function.
Please note that the text (layer name) after the function name must be within parenthesis.
|
A1
JavaScripts Since 1999 - email
webmaster
|
Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. A1 JavaScript Resources is independent of Sun Microsystems, Inc.
|
