<LAYER> | NN |4| IE n/a HTML n/a | |||||||||||||||||||||||||||||||
<LAYER>...</LAYER> | HTML End Tag: Required | |||||||||||||||||||||||||||||||
A layer element is a positionable element in Navigator 4's object model (e.g., like a block-level element whose CSS position attribute is set to absolute). As a result, many of the attributes are named according to the Navigator 4 way of positioning, sizing, and stacking positionable elements. The element was removed from the Netscape DOM for Version 6, and will not be implemented in new browsers or W3C standards. Content for a layer element can be read from a separate file (with the src attribute) or wired into the current document by placing the HTML between the start and end tags. You can include both types of content in the same layer element. Content from the src document is rendered first (as its own block-level element), with additional content starting on its own line below the external content's rectangle. A layer element can be positioned anywhere within a document and can overlap content belonging to other layers (including the base document layer). Under link or script control, content for an individual layer can be changed without having to reload the other content on the page. Moreover, layer elements may be nested inside one another. |
||||||||||||||||||||||||||||||||
Example | ||||||||||||||||||||||||||||||||
<LAYER bgcolor="yellow" src="instrux.html" width="200" height="300"></LAYER> |
||||||||||||||||||||||||||||||||
Object Model Reference | ||||||||||||||||||||||||||||||||
[window.]document.layerName
|
||||||||||||||||||||||||||||||||
Element-Specific Attributes | ||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||
Element-Specific Event Handler Attributes | ||||||||||||||||||||||||||||||||
|
above | NN |4| IE n/a HTML n/a |
above="layerID" | Optional |
Names the positionable element that is to be above (in front of) the current layer in the stacking order. This is a different way to set the z-index attribute that does not rely on an arbitrary numbering system. If you use the above attribute, do not use the below or z-index attribute for the same layer element. |
|
Example | |
<LAYER id="instrux" bgcolor="yellow" src="instrux.html" above="help1" width="200" height="300"> </LAYER> |
|
Value | |
Case-sensitive identifier. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.layerName.above
|
background | NN |4| IE n/a HTML n/a |
background="URL" | Optional |
Specifies an image file that is used as a backdrop to the text and other content of the layer element. Unlike normal images that get loaded into browser content, a background image loads in its original size (without scaling) and tiles to fill the available layer space. Smaller images download faster but are obviously repeated more often in the background. Animated GIFs are also allowable but very distracting to the reader. When selecting a background image, be sure it is very muted in comparison to the main content so that the content stands out clearly. Background images, if used at all, should be extremely subtle. |
|
Example | |
<LAYER background="blueCrinkle.jpg" src="instrux.html" width="200" height="300"> </LAYER> |
|
Value | |
Any valid URL to an image file, including complete and relative URLs. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.layerName.background
|
below | NN |4| IE n/a HTML n/a |
below="layerID" | Optional |
Names the positionable element that is to be below (behind) the current layer in the stacking order. This is a different way to set the z-index attribute that does not rely on an arbitrary numbering system. If you use the below attribute, do not use the above or z-index attribute for the same layer element. |
|
Example | |
<LAYER bgcolor="yellow" src="instrux.html" width="200" height="300" below="thankyou"> </LAYER> |
|
Value | |
Case-sensitive identifier. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.layerName.below
|
bgcolor | NN |4| IE n/a HTML n/a |
bgcolor="colorTripletOrName" | Optional |
Establishes a fill color (behind the text and other content) for the entire layer rectangle. If you combine a bgcolor and background, any transparent areas of the background image let the background color show through. |
|
Example | |
<LAYER bgcolor="yellow" src="instrux.html" width="200" height="300"></LAYER> |
|
Value | |
A hexadecimal triplet or plain-language color name. A setting of empty is interpreted as "#000000" (black). See Appendix A for acceptable plain-language color names. |
|
Default | |
Varies with operating system. |
|
Object Model Reference | |
[window.]document.layerName.bgColor
|
clip | NN |4| IE n/a HTML n/a |
clip="[leftPixel, topPixel,]rightPixel,bottomPixel" | Optional |
A clipping region is a rectangular view to the full layer content. Only content that is within the clipping rectangle can be seen on the page. The default value of the clip attribute is either the default size of the content or the layer element's width by the automatically flowing content length. Setting the clip attribute lets you rein in long content that might flow beyond a fixed rectangle desired for the page design. |
|
Example | |
<LAYER bgcolor="yellow" src="instrux.html" clip="50,50" width="200" height="300"> </LAYER> |
|
Value | |
clip attribute values are pixel measures from the top and left edges of the element as it flows in the document. The order of values is clockwise from the left edge, around the rectangle sides: left, top, right, bottom. If you supply only two values, Navigator 4 assumes the left and top values are zero, meaning that you wish to adjust only the right and bottom edges. Thus, a setting of "50,50" means that the clipping region is 50 pixels square, starting at the top-left corner of the layer's rectangle. If you want the same size view starting 10 pixels in from the left, the clip attribute setting becomes "10,0,60,50". |
|
Default | |
Naturally flowing viewing area of layer content. |
|
Object Model Reference | |
[window.]document.layerName.clip.left [window.]document.layerName.clip.top [window.]document.layerName.clip.right [window.]document.layerName.clip.bottom |
height, width | NN |4| IE n/a HTML n/a |
height="length" width="length" | Optional |
Define the minimum size of the layer element. When you add content to the layer during initial loading, however, the attribute settings do not restrict the amount of the content that is visible along either axis. For example, if you display an image in a layer that is 120 pixels wide by 90 pixels high, the actual visible size of a layer element whose height and width attributes are set to a smaller size expands to allow the full image to appear. The same happens to text or other content: the viewable region expands to allow all content to appear. To restrict the visible portion of the content, set the clip attribute. Setting the height and width attributes to specific sizes is helpful when you are creating a colored or patterned rectangle (via the bgcolor or background attributes) to act as an underlying layer beneath some other positioned content. Without content pushing on the edges of the layer, the height and width attributes set the clipping region to their sizes. |
|
Example | |
<LAYER bgcolor="yellow" src="instrux.html" width="200" height="300"></LAYER> |
|
Value | |
Positive integer values or percentage values. You can reduce both values to zero to not only hide the element (which you can also do with the visibility attribute), but also prevent the element from occupying any page space. |
|
Default | |
Naturally flowing viewing area of layer content. |
|
Object Model Reference | |
[window.]document.layerName.height [window.]document.layerName.width |
id | NN |4| IE n/a HTML n/a |
id="elementIdentifier" | Optional |
A unique identifier that distinguishes this element from all the rest in the document. This is the identifier used as values for the above and below attributes. Scripts also use the id attribute value as the layer element's name for object references. |
|
Example | |
<LAYER id="oldYeller" bgcolor="yellow" src="instrux.html" width="200" height="300"> </LAYER> |
|
Value | |
Case-sensitive identifier. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.layerName.name
|
lang | NN 3 IE 4 HTML 4 |
lang="languageCode" | Optional |
The language being used for the element's attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices. |
|
Example | |
<SPAN lang="de">Deutsche Bundesbahn</SPAN> |
|
Value | |
Case-insensitive language code. |
|
Default | |
Browser default. |
|
Object Model Reference | |
[window.]document.getElementById(elementID).lang
|
left, top | NN |4| IE n/a HTML n/a |
left="pixelCount" top="pixelCount" | Optional |
Define the positioned offset of the left and top edges of the layer relative to the spot in the document where the layer element would normally appear in source code order. This precise location relative to the page varies unless you also set the pagex and pagey attributes, which absolutely position the element in the document space. Unlike what it does for the ilayer element, Navigator does not preserve the space in the document where a layer element appears. The element is placed in its own plane, and the surrounding source code content is cinched upusually overlapping the layer content unless the layer is positioned elsewhere. |
|
Example | |
<LAYER bgcolor="yellow" src="instrux.html" width="200" height="300" left="10" top="50"> </LAYER> |
|
Value | |
Positive integer values (optionally quoted). |
|
Default | |
0 |
|
Object Model Reference | |
[window.]document.layerName.left [window.]document.layerName.top |
pagex, pagey | NN |4| IE n/a HTML n/a |
pagex="pixelCount" pagey="pixelCount" | Optional |
To truly position a layer element with repeatable accuracy, you can use the top-left corner of the document (page) as the point of reference. When you set the pagex and/or pagey attributes, you establish an offset for the left and top edges of the layer element relative to the corresponding edges of the entire document. Therefore, the zero point for a vertically scrolled page may be above the visible area of the browser window. |
|
Example | |
<LAYER bgcolor="yellow" src="instrux.html" width="200" height="300" pagex="50" pagey="350"> </LAYER> |
|
Value | |
Positive integer values (optionally quoted). |
|
Default | |
0 |
|
Object Model Reference | |
[window.]document.layerName.pageX [window.]document.layerName.pageY |
src | NN |4| IE n/a HTML n/a |
src="URL" | Optional |
To load the content of an external HTML file into a layer element, assign the URL of that file to the src attribute. Any HTML content between the layer start and end tags is rendered on the page after the content is loaded from the src URL. If you omit the src attribute, only content between the tags is rendered. Scripts can change the corresponding object property (src) after the document has loaded to dynamically change content within the layer element (without reloading the main document). |
|
Example | |
<LAYER bgcolor="yellow" src="instrux.html" width="200" height="300"></LAYER> |
|
Value | |
A complete or relative URL. |
|
Default | |
None. |
|
Object Model Reference | |
[window.]document.layerName.src
|
top | |
See left. |
visibility | NN |4| IE n/a HTML n/a |
visibility="visibilityConstant" | Optional |
Determines whether Navigator 4 displays the layer element. The default behavior is for a layer to inherit the visibility attribute of its next outermost (parent) layer. For a layer element that is part of the basic document body, this means that the layer is seen by default (the base layer is always visible). To hide a layer when the page loads, set the visibility attribute to "hidden". You need to set the attribute to "show" only if the layer element is nested within another layer (or ilayer) whose visibility value is set to (or is inherited as) "hidden". |
|
Example | |
<LAYER bgcolor="yellow" src="instrux.html" width="200" height="300" pagex="50" pagey="350" visibility="hidden"> </LAYER> |
|
Value | |
One of the accepted constants: hidden | inherit | visible. |
|
Default | |
inherit |
|
Object Model Reference | |
[window.]document.layerName.visibility
|
width | |
See height. |
z-index | NN |4| IE n/a HTML n/a |
z-index="layerNumber" | Optional |
Controls the positioning of layers along the Z-axis (front-to-back) of the document relative to the next outermost layer container. When the z-index values of two or more positionable elements within the same container (such as the base document layer) are identical numbers, the loading order of the elements in the HTML source code controls the stacking order, with the later elements stacked in front of earlier ones. The default z-index value for all positionable elements is zero. Therefore, if you want only one positionable element to appear in front of all the others that stack in their default order, you simply assign any positive value (even 1) to that standout element. Stacking order of positionable elements can be changed on-the-fly via scripting. See also the above and below attributes. |
|
Example | |
<LAYER bgcolor="yellow" src="instrux.html" width="200" height="300" z-index="1"> </LAYER> |
|
Value | |
Any integer. |
|
Default | |
0 |
|
Object Model Reference | |
[window.]document.layerName.zIndex
|