Nested Layer Visibility Relationships (W3C) : Layer « HTML « JavaScript DHTML






  1. JavaScript DHTML
  2. HTML
  3. Layer

Nested Layer Visibility Relationships (W3C)

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/


<HTML>
<HEAD>
<TITLE>layer.style.visibility (W3C)</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setOuterVis(type) {
    document.getElementById("outerDisplay").style.visibility = type
}
function setInnerVis(type) {
    document.getElementById("innerDisplay").style.visibility = type
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Setting the <TT>layer.style.visibility</TT> Property of Nested Layers (W3C)</H1>
<HR>
Click the buttons to see what happens when you change the visibility of the
 <FONT COLOR="coral">outer layer</FONT> and <FONT COLOR="aquamarine">inner layer</FONT> objects.<P>
<DIV STYLE="position:absolute; top:150; width:180; background-color:coral">
<FORM>
Control outer layer property:<BR>

<INPUT TYPE="button" VALUE="Hide Outer Layer" onClick="setOuterVis('hidden')"><BR>
<INPUT TYPE="button" VALUE="Show Outer Layer" onClick="setOuterVis('visible')"><BR>
</FORM>
</DIV>
<DIV STYLE="position:absolute; top:270; width:180; background-color:aquamarine">
<FORM>
Control inner layer property:<BR>
<INPUT TYPE="button" VALUE="Hide Inner Layer" onClick="setInnerVis('hidden')"><BR>
<INPUT TYPE="button" VALUE="Show Inner Layer" onClick="setInnerVis('visible')"><BR>
<INPUT TYPE="button" VALUE="Inherit Outer Layer" onClick="setInnerVis('inherit')"><BR>
</FORM>
</DIV>
<DIV ID="outerDisplay" STYLE="position:absolute; top:150; left:200; width:370;
 height:190; background-color:coral">
    <DIV ID="innerDisplay" STYLE="position:absolute; top:5; left:5; width:360;
 height:180; background-color:aquamarine">
    <P><B>Placeholder text for raw inner layer.</B></P>
    </DIV>
</DIV>
</BODY>
</HTML>








Related examples in the same category

1.Layer 'srcFilter' Example
2.Monitors divisions (or layers) on dynamic Web pages (DHTML)
3.Hide and show layer
4. Layer Background Colors (W3C)
5.Setting Layer Backgrounds (W3C)
6.The layer while rolling over the link.
7.Accessing Layers with JavaScript
8.'layer' and 'ilayer' Tag Properties
9.Detecting Navigator and Internet Explorer
10. Adjusting Layer clip Properties (W3C)
11.Comparison of Layer and Clip Location Properties (W3C)
12. Testing Nested Layer Coordinate Systems (W3C)
13.Relationships Among zIndex Values (W3C)
14.Dragging a Layer (W3C)
15.Resizing a Layer (W3C)
16.Methods and Properties of the Layer Object
17.Layer seek