Text file of source for Clipping Layers Demo I. ***************** 40-lay-4d.htm ***************** <HTML> <HEAD> <TITLE>Clipping Layers Demo I - Intro Page</TITLE> <SCRIPT> <!-- Activate Cloaking Device //****************************************************** // Clipping Layers Demo I // // by Tim Wallace (timothy@essex1.com) // //****************************************************** // Called by View Source button - displays text file of source. function viewSource() { alert("\nA text file with source will be loaded to the full window.\n\nUse your browser BACK button to return to the examples."); top.window.location.href="40-lay4d.txt"; } // Deactivate Cloaking --> </SCRIPT> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- Activate Cloaking Device var middleX, middleY, pos; function start() { document.layers["momma"].layers["txt"].visibility="hide"; document.layers["momma"].layers["message"].visibility="hide"; // get size of image var width= document.layers["momma"].layers["pic"].document.net2.width; var height= document.layers["momma"].layers["pic"].document.net2.height; // calculate pixel in the middle of image middleX= Math.round(width/2); middleY= Math.round(height/2); // starting position pos= 0; // start it! show(); } function show() { // increase size of clipping area pos+= 2; // step size document.layers["momma"].layers["pic"].clip.left= middleX- pos; document.layers["momma"].layers["pic"].clip.top= middleY- pos; document.layers["momma"].layers["pic"].clip.right= middleX+ pos; document.layers["momma"].layers["pic"].clip.bottom= middleY+ pos; // check if the whole image has been displayed if (!((pos > middleX) && (pos > middleY))) setTimeout("show()", 20); else document.layers["momma"].layers["txt"].visibility="show"; } // Deactivate Cloaking --> </SCRIPT> </HEAD> <BODY bgColor=00ffff> <layer name=momma z-index=0 src="40-lay4l.htm"></layer> <nolayer> <center><strong> <font color=000080 size=+3> <i> Clipping Layers Demo I </i> </font> </strong></center> <br><br> <center><strong> <font color=800000 size=+1> This example requires Netscape's Communicator... </font> <br><br> <font color=800000 size=> click on button below to see what you're missing. </font> </strong></center> <br><br> <center> <A HREF="http://home.netscape.com/comprod/products/communicator/index.html" TARGET=_top> <IMG SRC="40-now40.gif" border=0></A> </center> <br><br> <center><form> <INPUT TYPE="button" Value="View Source Anyway" onClick="viewSource()"> </form></center> </nolayer> </BODY> </HTML> ***************** 40-lay-4l.htm ***************** <HTML> <HEAD> <TITLE>Clipping Layers Demo I - Layers Page</TITLE> <SCRIPT> <!-- Activate Cloaking Device //****************************************************** // Clipping Layers Demo I // // by Tim Wallace (timothy@essex1.com) // //****************************************************** // Deactivate Cloaking --> </SCRIPT> </HEAD> <BODY> <layer name=title left=160 top=10> <strong> <font color=000080 size=+3> <i> Clipping Layers Demo I </i> </font> </strong> </layer> <layer name=pic z-index=0 left=267 top=100 clip="50,50,50,50"> <img name=net2 src="40-net2.gif" width=100 height=99> </layer> <layer name=txt z-index=1 left=175 top=115 visibility=hide> <font color=ff0000 size=+3> <STRONG><i> COMMUNICATOR </i></STRONG> </font> </layer> <layer name=message z-index=2 left=178 top=125 visibility=show> <font color=000000 size=+1> <i> Click the button to see the effect... </i> </font> </layer> <layer name=buttons z-index=3 left=263 top=235> <form> <input type="button" value="Check It Out" onClick="start()"> </form> </layer> <layer name=viewsource left=263 top=250> <br><br> <form> <INPUT TYPE="button" Value="View Source" onClick="viewSource()"> </form> </layer> </BODY> </HTML>