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

Example 14.6:
Clipping Layers

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

Use the buttons to reduce or enlarge the layer by moving its edges:

This text is in layer1.


Clipping:




Here is our layer: <LAYER NAME="layer1" LEFT=360 TOP=250 BGCOLOR="#ffff00"><BR> <H1>This text is in layer1.</H1><BR> </LAYER> And this is how we clip it: <FORM> <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> </FORM>
Previous Example-|-Next Example-|-Return to Chapter Listing