Previous Example-|-Next Example-|-Return to Chapter Listing

Example 14.8:
All Sorts of Layers Controls

[This example works with Netscape Navigator 4. It won't work with Netscape Navigator 2 or 3, or Internet Explorer 3.]


This text is in layer 1.


This text is in layer 1A.

This text is in layer 2.


This text is in layer 2A.
The buttons on this page allow you to
manipulate the two layers. Layer 1 has
controls that allow you to change its
position and clipping. Layer 2 has controls
that can move it "above" or "below" layer 1,
and also make it invisible.

Layer 1 controls

Movement:

Clipping:




Layer 2 controls:

    Layer 2A:  


These are the layers: <LAYER NAME="layer1" LEFT=360 TOP=176 BGCOLOR="#ffff00"><BR> <H1>This text is in layer 1.</H1><BR> <LAYER NAME="layer1A" LEFT=72 TOP=80 VISIBILITY=show BGCOLOR="#8888ff"> This text is in layer 1A. </LAYER> </LAYER> <LAYER NAME="layer2" LEFT=472 TOP=248 BGCOLOR="#00ffff" ABOVE="layer1"><BR> <H1>This text is in layer 2.</H1><BR> <LAYER NAME="layer2A" LEFT=72 TOP=80 VISIBILITY=show BGCOLOR="#8888ff"> This text is in layer 2A. </LAYER> </LAYER> And these are the controls: <FORM NAME="layerForm"> <H3> Movement: <INPUT TYPE="button" VALUE=" Left " onclick="layers.layer1.left -= 10"> <INPUT TYPE="button" VALUE=" Right " onclick="layers.layer1.left += 10"> <INPUT TYPE="button" VALUE=" Up " onclick="layers.layer1.top -= 10"> <INPUT TYPE="button" VALUE=" Down " onclick="layers.layer1.top += 10"> </H3> <TABLE> <TR> <TD ALIGN=center VALIGN=center> <H3> Clipping: </H3> </TD> <TD ALIGN=center> <INPUT TYPE="button" VALUE=" - top " onclick="layers.layer1.clip.top -= 10"> <BR> <INPUT TYPE="button" VALUE=" + top " onclick="layers.layer1.clip.top += 10"> </TD> <TD></TD> </TR> <TD ALIGN=right> <INPUT TYPE="button" VALUE=" - left " onclick="layers.layer1.clip.left -= 10"> <INPUT TYPE="button" VALUE=" + left " onclick="layers.layer1.clip.left += 10"> </TD> <TD></TD> <TD ALIGN=left> <INPUT TYPE="button" VALUE=" - right " onclick="layers.layer1.clip.right -= 10"> <INPUT TYPE="button" VALUE=" + right " onclick="layers.layer1.clip.right += 10"> </TD> </TR> <TR> <TD></TD> <TD ALIGN=center> <INPUT TYPE="button" VALUE=" - bottom " onclick="layers.layer1.clip.bottom -= 10"> <BR> <INPUT TYPE="button" VALUE=" + bottom " onclick="layers.layer1.clip.bottom += 10"> </TD> <TD></TD> </TR> </TABLE> <HR> <H2>Layer 2 controls: <INPUT TYPE="button" VALUE=" Above " onclick="layers.layer2.moveAbove(layers.layer1)"> <INPUT TYPE="button" VALUE=" Below " onclick="layers.layer2.moveBelow(layers.layer1)"> <INPUT TYPE="button" VALUE=" Hide " onclick="layers.layer2.visibility = 'hide'"> <INPUT TYPE="button" VALUE=" Show " onclick="layers.layer2.visibility = 'inherit'"> &nbsp;&nbsp;&nbsp; Layer 2A: &nbsp; <INPUT TYPE="button" VALUE=" Hide " onclick="layers.layer2.layers.layer2A.visibility = 'hide'"> <INPUT TYPE="button" VALUE=" Inherit " onclick="layers.layer2.layers.layer2A.visibility = 'inherit'"> </H2> </FORM>
Previous Example-|-Next Example-|-Return to Chapter Listing