Scribd Logo
Hochladen

Welcome to Scribd!

  • Layers of Netscape

    Uploaded by

    Sunil Nagar
    1K views4 pages
    Netscape 4 introduced a Layer object that allowed elements with absolute positioning to be placed in separate layers from the rest of the document. These layers could be independently positioned and their visibility controlled. The <layer> HTML tag was used to position and animate elements in layers, with each layer acting like a separate document on top of the main one. The z-index property specifies the stack order of elements and controls which appears on top in the event of an overlap when using absolute positioning.

    Original Description:

    Original Title

    LAYERS OF NETSCAPE (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Netscape 4 introduced a Layer object that allowed elements with absolute positioning to be placed in separate layers from the rest of the document. These layers could be independently positioned and their visibility controlled. The <layer> HTML tag was used to position and animate elements in layers, with each layer acting like a separate document on top of the main one. The z-index property specifies the stack order of elements and controls which appears on top in the event of an overlap when using absolute positioning.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    1K views4 pages

    Layers of Netscape

    Uploaded by

    Sunil Nagar
    Netscape 4 introduced a Layer object that allowed elements with absolute positioning to be placed in separate layers from the rest of the document. These layers could be independently positioned and their visibility controlled. The <layer> HTML tag was used to position and animate elements in layers, with each layer acting like a separate document on top of the main one. The z-index property specifies the stack order of elements and controls which appears on top in the event of an overlap when using absolute positioning.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 4

    LAYERS OF NETSCAPE

    Creating DHTML effects with Netscape 4 is a more complicated affair. Netscape 4


    does not support a full object model, so it does not allow JavaScript programs to
    refer to arbitrary HTML elements. It cannot, therefore, allow access to the inline
    styles of arbitrary elements. Instead, it defines a special Layer object.[68] Any
    element that is absolutely positioned (that is, any element that has its position
    style set to absolute) is placed in a separate layer from the rest of the document.
    This layer can be independently positioned, hidden, shown, lowered below or
    raised above other layers, and so on. The Layer API was proposed to the W3C for
    standardization but was never standardized. For this reason, it has been dropped
    by the Mozilla project and is not supported in Mozilla or in Netscape 6. Thus, the
    techniques described in this section are useful only in the 4.x series of browsers
    from Netscape.
    The HTML <layer> tag is used to position and animate (through scripting) elements
    in a page. A layer can be thought of as a separate document that resides on top of
    the main one, all existing within one window.
    This tag has support in Netscape 4 and higher versions of it.
    This example creates three overlapping layers. The back one is red, the middle one
    is blue, and the front one is green.
    Live Demo
    <!DOCTYPE html>
    <html>

    <head>
    <title>HTML layer Tag</title>
    </head>
    <body>
    <layer id = "layer1" top = "250" left = "50" width = "200"
    height = "200" bgcolor = "red">
    <p>layer 1</p>
    </layer>
    <layer id = "layer2" top = "350" left = "150" width = "200"
    height = "200" bgcolor = "blue">
    <p>layer 2</p>
    </layer>
    <layer id = "layer3" top = "450" left = "250" width = "200"
    height = "200" bgcolor = "green">
    <p>layer 3</p>
    </layer>
    </body>

    </html>
    Most important layer attributes below:

    id
    The name of the layer, used to identify it in your script
    left
    The position of the layer in relationship to the x coordinates
    top
    The position of the layer in relationship to the y coordinates
    width
    The width of the layer, in px or %
    height
    The height of the layer, in px or %
    bgColor
    The background color of the layer
    background
    The background image of the layer
    src
    The external html document contained inside the layer

    Z-INDEX PROPERTY OF LAYERS

    Normally the browser maintains the content as a stack of layers. The z-index
    property specifies the stack order of an element. An element with greater stack order is
    always in front of an element with a lower stack order.

    The z-index property, when used in conjunction with the position property,
    enables you to specify which element should appear on top in the event of an
    overlap. An overlap can easily occur when using the position property and this is
    often desirable when creating advanced layouts.

    <html>
    <head>
    <title> Layer effect example </title>
    </head>
    <body>
    LAYER 1 ON TOP:
    <div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div>
    <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-
    index:1">LAYER 2</div>
    LAYER 2 ON TOP:
    <div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div>
    <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-
    index:4">LAYER 2</div>
    </body>
    </html>
    NOTE

    You might also like