| 1 | <HTML>
|
|---|
| 2 | <!-- This file is part of the HTML Reference Library ('HTMLib') -->
|
|---|
| 3 | <!-- It should not be used outside of the HTMLib package -->
|
|---|
| 4 | <!-- The HTMLib is © 1995-1998 Stephen Le Hunte -->
|
|---|
| 5 | <!-- htmlib@htmlib.demon.co.uk -->
|
|---|
| 6 | <HEAD>
|
|---|
| 7 | <LINK REL="stylesheet" HREF="../style.css" TYPE="text/css">
|
|---|
| 8 | <TITLE><LAYER></TITLE>
|
|---|
| 9 | <SCRIPT LANGUAGE="VBScript">
|
|---|
| 10 | <!--
|
|---|
| 11 | Sub Window_OnLoad()
|
|---|
| 12 | doAnim(2)
|
|---|
| 13 | End Sub
|
|---|
| 14 | Sub doAnim(dir)
|
|---|
| 15 | select case dir
|
|---|
| 16 | case 2
|
|---|
| 17 | document.all("QMark").style.pixelLeft=document.all("QMark").style.pixelLeft + 2
|
|---|
| 18 | if document.all("QMark").style.pixelLeft >=275 then
|
|---|
| 19 | str=self.setTimeout("doAnim(1)",10)
|
|---|
| 20 | else
|
|---|
| 21 | str=self.setTimeout("doAnim(2)",10)
|
|---|
| 22 | end if
|
|---|
| 23 | case 1
|
|---|
| 24 | document.all("QMark").style.pixelLeft=document.all("QMark").style.pixelLeft - 2
|
|---|
| 25 | if document.all("QMark").style.pixelLeft <=0 then
|
|---|
| 26 | str=self.setTimeout("doAnim(2)",10)
|
|---|
| 27 | else
|
|---|
| 28 | str=self.setTimeout("doAnim(1)",10)
|
|---|
| 29 | end if
|
|---|
| 30 | end select
|
|---|
| 31 | end sub
|
|---|
| 32 | -->
|
|---|
| 33 | </SCRIPT>
|
|---|
| 34 | </HEAD>
|
|---|
| 35 | <BODY TOPMARGIN="0" BGCOLOR="#FFFFE0" TEXT="#000000">
|
|---|
| 36 |
|
|---|
| 37 | <CENTER>
|
|---|
| 38 | <SPAN CLASS="NSRtitle"><LAYER...></SPAN>
|
|---|
| 39 | </CENTER>
|
|---|
| 40 |
|
|---|
| 41 | <P>The <CODE><LAYER></CODE> element (currently only supported by the <STRONG>Navigator</STRONG> component of <STRONG>Netscape Communicator</STRONG>) allows discrete 'layers' of documents to be produced. It was introduced in <STRONG>Navigator</STRONG> 4.0, pre-empting the widespread adoption of standards based positioning (using style sheets), as supported by <STRONG>Internet Explorer</STRONG> 4.0 (and also <STRONG>Navigator</STRONG> 4.0). The standards based style sheet positioning mechanism is preferable to use of the <CODE><LAYER></CODE> element. For details, see the <A HREF="../Style_Sheets/ov.htm" TITLE="View the Style Sheets overview">Style Sheets</A> section for details.
|
|---|
| 42 |
|
|---|
| 43 | <P>Layers can contain <EM>any</EM> normal HTML content and can be exactly positioned in (or even outside of) the browser window and be displayed overlapping one another to create complex layouts in HTML documents. There are two basic types of layers, one that is given a fixed position (using the <CODE><LAYER></CODE> element) and one that can be placed relative to its position in the flow of document text (using the <A HREF="../Text_Formatting/ilayer.htm"><CODE><ILAYER></CODE></A> element). Each defined layer in a document can be controlled by JavaScript, to produce almost limitless visual effects. For details, see the <A HREF="../Scripting_Reference/layero.htm">Layer Object</A> in the Scripting Reference.
|
|---|
| 44 | <P>The <CODE><LAYER></CODE> element accepts the following attributes :
|
|---|
| 45 |
|
|---|
| 46 | <P><A NAME="NAME"><SPAN CLASS="attr">NAME</SPAN></A><BR>
|
|---|
| 47 | The <CODE>NAME</CODE> attribute can be supplied to uniquely identify the layer for scripting purposes. By default, all layers are unnamed.
|
|---|
| 48 | <P><A NAME="LEFT"><SPAN CLASS="attr">LEFT</SPAN></A><BR>
|
|---|
| 49 | <CODE>LEFT</CODE> specifies the layers exact x coordinate, in pixels, where "0" (the default value) is the left-hand edge of the current browser window. Care should be taken in specifying the <CODE>LEFT</CODE> (and indeed <CODE>TOP</CODE> attribute) as you cannot guarantee the size of the users window. However, with JavaScript 1.2 (supported in <STRONG>Communicator</STRONG>) it is possible to dynamically resize and move any browser windows. See the <A HREF="../Scripting_Reference/layero.htm">Layer Object</A> for more information. The <CODE>LEFT</CODE> attribute can be given negative, or large positive values, initially displaying the layer off the current browser window (useful for when scripting transition effects with layers).
|
|---|
| 50 | <P><A NAME="TOP"><SPAN CLASS="attr">TOP</SPAN></A><BR>
|
|---|
| 51 | The <CODE>TOP</CODE> attribute specifies the exact y coordinate in pixels, where "0" (again, the default value, as with the <CODE>LEFT</CODE> attribute) is the top-most edge of the current browser window. As with the <CODE>LEFT</CODE> attribute, care should be taken, unless you are dynamically resizing the browser window for the layered effect. The <CODE>TOP</CODE> attribute can be set with negative, or large positive values, initially displaying the layer outside the current browser window (useful for scripting layer transition effects).
|
|---|
| 52 | <P><A NAME="SRC"><SPAN CLASS="attr">SRC</SPAN></A><BR>
|
|---|
| 53 | The <CODE>SRC</CODE> attribute can be used to reference a separate document that contains the content of the layer. Currently (for Communicator pre-release 2), the document referenced must not include <CODE><A HREF="../Document_Structure_Elements/head.htm"><HEAD></A></CODE> or <CODE><A HREF="../Document_Structure_Elements/body.htm"><BODY></A></CODE> elements. Referencing external layer source files may be extremely useful if you provide the same frequently changing layer in several documents. As with <A HREF="../Media_Embedding/csim.htm">Client Side Image Maps</A>, only the layer source file needs to be altered to update all the documents that contain the particular layer. Note that there is currently no way to set the height of a particular layer (just the width - see below), which could affect the layout of any other layers in documents if a layer using an external source has its contents size drastically changed.
|
|---|
| 54 | <P><A NAME="ZINDEX"><SPAN CLASS="attr">Z-INDEX</SPAN></A><BR>
|
|---|
| 55 | The <CODE>Z-INDEX</CODE> attribute is mutually exclusive with the <CODE>ABOVE</CODE> and <CODE>BELOW</CODE> attributes. It is supplied with a numerical value which determines the layers z-order setting (which determines how various layers overlap each other). The z-order can be thought of as the z axis of the browser window, with increasing values as the axis originates from the page out towards the user. Hence, a layer with a <CODE>Z-INDEX</CODE> of 2 would overlap a layer whose <CODE>Z-INDEX</CODE> is 1. The differences need not be incremental values, basically, with any number of layers, the one with the highest <CODE>Z-INDEX</CODE> will be displayed above the others.
|
|---|
| 56 | <P><A NAME="ABOVE"><SPAN CLASS="attr">ABOVE</SPAN></A><BR>
|
|---|
| 57 | The <CODE>ABOVE</CODE> attribute (mutually exclusive with <CODE>Z-INDEX</CODE> and <CODE>BELOW</CODE> attributes) can be used to specify the layer immediately above the current layer. For example,
|
|---|
| 58 |
|
|---|
| 59 | <SPAN CLASS="egcode">
|
|---|
| 60 | <BLOCKQUOTE>
|
|---|
| 61 | <CODE><LAYER NAME="Red"><BR>
|
|---|
| 62 | . . . Layer content<BR>
|
|---|
| 63 | </LAYER><BR>
|
|---|
| 64 | <LAYER NAME="Green" <STRONG>ABOVE</STRONG>="Red"><BR>
|
|---|
| 65 | . . . Layer content<BR>
|
|---|
| 66 | </LAYER></CODE>
|
|---|
| 67 | </BLOCKQUOTE>
|
|---|
| 68 | </SPAN>
|
|---|
| 69 |
|
|---|
| 70 | <P>The layer <CODE>NAME</CODE>d "Red" would be displayed on-top of the layer <CODE>NAME</CODE>d "Green". Note that currently, any layer specified as being <CODE>ABOVE</CODE> another, must be defined before the lower layer in the document.
|
|---|
| 71 |
|
|---|
| 72 | <P><A NAME="BELOW"><SPAN CLASS="attr">BELOW</SPAN></A><BR>
|
|---|
| 73 | Similar to the <CODE>ABOVE</CODE> attribute (and mutually exclusive with it and the <CODE>Z-INDEX</CODE> attribute), the <CODE>BELOW</CODE> attribute specifies the layer to be displayed immediately below the current layer, with the same restrictions as the <CODE>ABOVE</CODE> attribute.
|
|---|
| 74 |
|
|---|
| 75 | <P><A NAME="WIDTH"><SPAN CLASS="attr">WIDTH</SPAN></A><BR>
|
|---|
| 76 | The <CODE>WIDTH</CODE> attribute can be specified (with a pixel value) to set the width of the layer, to determine how the content of the layer is wrapped within the layer. Layer heights are automatically defined according to the content of the layer.
|
|---|
| 77 |
|
|---|
| 78 | <P><A NAME="CLIP"><SPAN CLASS="attr">CLIP</SPAN></A><BR>
|
|---|
| 79 | The <CODE>CLIP</CODE> attribute can be used to specify a certain portion of the layer as being visible. Anything outside the <CODE>CLIP</CODE> region is transparent and won't be displayed. It accepts 4 pixel values (comma delimited) which are used to set the <CODE>CLIP</CODE> rectangles left, top, right and bottom coordinates. Left and right values start from the left hand edge of the layer, while top and bottom values start from the top of the layer. If only two values are supplied, then the left and top coordinates are set to 0. For example :
|
|---|
| 80 |
|
|---|
| 81 | <SPAN CLASS="egcode">
|
|---|
| 82 | <BLOCKQUOTE>
|
|---|
| 83 | <CODE><LAYER <STRONG>CLIP</STRONG>="10,10,50,20"><BR>
|
|---|
| 84 | . . .
|
|---|
| 85 | </CODE>
|
|---|
| 86 | </BLOCKQUOTE>
|
|---|
| 87 | </SPAN>
|
|---|
| 88 |
|
|---|
| 89 | <P>specifies a clipping region of 40 (x direction) by 10 (y direction) pixels for the layer, starting at the position 10,10 (x,y), while :
|
|---|
| 90 |
|
|---|
| 91 | <SPAN CLASS="egcode">
|
|---|
| 92 | <BLOCKQUOTE>
|
|---|
| 93 | <CODE><LAYER <STRONG>CLIP</STRONG>="50,20"><BR>
|
|---|
| 94 | . . .
|
|---|
| 95 | </CODE>
|
|---|
| 96 | </BLOCKQUOTE>
|
|---|
| 97 | </SPAN>
|
|---|
| 98 |
|
|---|
| 99 | <P>specifies a clipping region of 50 (x direction) by 20 (y direction) pixels for the layer, starting at the position 0,0 (x,y).
|
|---|
| 100 |
|
|---|
| 101 | <P><A NAME="VISIBILITY"><SPAN CLASS="attr">VISIBILITY</SPAN></A><BR>
|
|---|
| 102 | The <CODE>VISIBILITY</CODE> attribute controls whether the layer is currently visible or not. It can accept values of <CODE>show</CODE>, <CODE>hide</CODE> or <CODE>inherit</CODE>. Show and hide explicitly set the layers visibility, while inherit makes the current layer inherit the <CODE>VISIBILITY</CODE> of its parent layer(s) (layers can be nested). If the current layer <EM>is</EM> a parent layer (or contains no child layers), 'show' and 'inherit' are identical, since the layer will be visible (unless <CODE>VISIBILITY="hide"</CODE> is used).
|
|---|
| 103 |
|
|---|
| 104 | <P><A NAME="BGCOLOR"><SPAN CLASS="attr">BGCOLOR</SPAN></A><BR>
|
|---|
| 105 | <CODE>BGCOLOR</CODE> can be used to set the background colour of the current layer. By default, layers are transparent, specifying a <CODE>BGCOLOR</CODE> makes the layer opaque, using the colour specified. Any standard rrgggbb triplet, or a named colour can be used. For more details on document colouring, see the <A HREF="../Document_Structure_Elements/body.htm"><CODE><BODY></CODE></A> element.
|
|---|
| 106 |
|
|---|
| 107 | <P><A NAME="BACKGROUND"><SPAN CLASS="attr">BACKGROUND</SPAN></A><BR>
|
|---|
| 108 | The <CODE>BACKGROUND</CODE> attribute can be used to reference a background image for the layer. Note that is the image used is wider than the layers <CODE>WIDTH</CODE> attribute value (see above), then the width of the layer will be extended to display the image fully.
|
|---|
| 109 |
|
|---|
| 110 | <P><STRONG><A NAME="Examples" STYLE="{color : #000000}">Layer examples</A></STRONG><BR>
|
|---|
| 111 | The following (very simple) HTML fragment specifies a number of different document layers, mainly using <CODE>ABOVE</CODE> and <CODE>BELOW</CODE> attributes to set the z-order of the layers. Style sheet settings and script functions have not been included for brevity. For more details about JavaScript interactions with layers, see the <A HREF="../Scripting_Reference/layero.htm">Layer Object</A> and for style sheet information, see the <A HREF="../Style_Sheets/ov.htm">Style Sheets</A> topic.
|
|---|
| 112 |
|
|---|
| 113 | <SPAN CLASS="egcode">
|
|---|
| 114 | <BLOCKQUOTE>
|
|---|
| 115 | <CODE>. . .<BR>
|
|---|
| 116 | <LAYER LEFT="-50" TOP="100" NAME="QMark"><BR>
|
|---|
| 117 | <SPAN CLASS="QMark">?</SPAN><BR>
|
|---|
| 118 | </LAYER><BR>
|
|---|
| 119 | <LAYER LEFT="25" TOP="100" NAME="What" ABOVE="QMark"><BR>
|
|---|
| 120 | <SPAN CLASS="What">What</SPAN><BR>
|
|---|
| 121 | </LAYER><BR>
|
|---|
| 122 | <LAYER LEFT="135" TOP="100" NAME="Do" BELOW="QMark"><BR>
|
|---|
| 123 | <SPAN CLASS="Do">do</SPAN><BR>
|
|---|
| 124 | </LAYER><BR>
|
|---|
| 125 | <LAYER LEFT="187" TOP="100" NAME="You" ABOVE="QMark"><BR>
|
|---|
| 126 | <SPAN CLASS="You">you</SPAN><BR>
|
|---|
| 127 | </LAYER><BR>
|
|---|
| 128 | <LAYER LEFT="264" TOP="100" NAME="Want" BELOW="QMark"><BR>
|
|---|
| 129 | <SPAN CLASS="Want">want</SPAN><BR>
|
|---|
| 130 | </LAYER><BR>
|
|---|
| 131 | <LAYER LEFT="365" TOP="100" NAME="To" ABOVE="QMark"><BR>
|
|---|
| 132 | <SPAN CLASS="To">to</SPAN><BR>
|
|---|
| 133 | </LAYER><BR>
|
|---|
| 134 | <LAYER LEFT="100" TOP="125" NAME="Know" BELOW="QMark"><BR>
|
|---|
| 135 | <SPAN CLASS="Know">know</SPAN><BR>
|
|---|
| 136 | </LAYER><BR>
|
|---|
| 137 | <LAYER LEFT="210" TOP="125" NAME="Today" ABOVE="QMark"><BR>
|
|---|
| 138 | <SPAN CLASS="Today">today</SPAN><BR>
|
|---|
| 139 | </LAYER><BR>
|
|---|
| 140 | . . .
|
|---|
| 141 | </CODE>
|
|---|
| 142 | </BLOCKQUOTE>
|
|---|
| 143 | </SPAN>
|
|---|
| 144 |
|
|---|
| 145 | <P>can be used to create the following effect :
|
|---|
| 146 |
|
|---|
| 147 | <P>
|
|---|
| 148 | <CENTER>
|
|---|
| 149 | <DIV BACKGROUND="#ffffe0" ID="LayerTesting" STYLE="position:relative;WIDTH:250pt;HEIGHT:55pt;background-color:#FFFFE0;border-style:solid;border-width:1px">
|
|---|
| 150 | <SPAN STYLE="container:positioned;position:absolute;TOP:5pt;LEFT:8pt;WIDTH:65pt;HEIGHT:27pt;Z-INDEX:6;font:bold italic 24pt Arial;color:#CCCCCC" ID="What">What</SPAN>
|
|---|
| 151 | <SPAN STYLE="container:positioned;position:absolute;TOP:5pt;LEFT:68pt;WIDTH:45pt;HEIGHT:25pt;Z-INDEX:4;font:bold italic 24pt Arial;color:#999999">do</SPAN>
|
|---|
| 152 | <SPAN STYLE="container:positioned;position:absolute;TOP:5pt;LEFT:104pt;WIDTH:50pt;HEIGHT:33pt;Z-INDEX:7;font:bold italic 24pt Arial;color:#CCCCCC">you</SPAN>
|
|---|
| 153 | <SPAN STYLE="container:positioned;position:absolute;TOP:5pt;LEFT:151pt;WIDTH:65pt;HEIGHT:25pt;Z-INDEX:3;font:bold italic 24pt Arial;color:#999999">want</SPAN>
|
|---|
| 154 | <SPAN STYLE="container:positioned;position:absolute;TOP:5pt;LEFT:210pt;WIDTH:33pt;HEIGHT:25pt;Z-INDEX:8;font:bold italic 24pt Arial;color:#CCCCCC" ID="To">to</SPAN>
|
|---|
| 155 | <SPAN STYLE="container:positioned;position:absolute;TOP:0;LEFT:0;WIDTH:10;HEIGHT:56;Z-INDEX:5;font:bold italic 48pt Arial;color:#666666" ID="QMark">?</SPAN>
|
|---|
| 156 | <SPAN STYLE="container:positioned;position:absolute;TOP:21pt;LEFT:55pt;WIDTH:74pt;HEIGHT:25pt;Z-INDEX:4;font:bold italic 24pt Arial;color:#999999">know</SPAN>
|
|---|
| 157 | <SPAN STYLE="container:positioned;position:absolute;TOP:21pt;LEFT:125pt;WIDTH:75pt;HEIGHT:33pt;Z-INDEX:9;font:bold italic 24pt Arial;color:#CCCCCC">today</SPAN>
|
|---|
| 158 | </DIV>
|
|---|
| 159 | </CENTER>
|
|---|
| 160 |
|
|---|
| 161 | <P><STRONG><EM>NOTE : </EM></STRONG>As you've probably guessed, the functional example above is not using layers, but <A HREF="../Style_Sheets/ov.htm" TITLE="View the STyle Sheets Overview">Style Sheet</A> positioning of various elements to achieve the same effect as using layers in <STRONG>Netscape Communicator</STRONG>.
|
|---|
| 162 |
|
|---|
| 163 | <P><HR WIDTH="75%" ALIGN="center">
|
|---|
| 164 |
|
|---|
| 165 | <P>The <CODE><LAYER></CODE> element does have various properties and methods that can be manipulated and invoked in a document. These are accessed through the <A HREF="../Scripting_Reference/layero.htm" TITLE="View the Layer Object topic">Layer Object</A> and are only supported by <STRONG>Netscape</STRONG> 4.0 and above.
|
|---|
| 166 |
|
|---|
| 167 |
|
|---|
| 168 | <P>
|
|---|
| 169 |
|
|---|
| 170 | <P ALIGN="right" CLASS="copyright">© 1995-1998, Stephen Le Hunte</P>
|
|---|
| 171 | </BODY>
|
|---|
| 172 | </HTML>
|
|---|
