HTML Layer Tag

09:20  Tigerzplace  No comments

                         HTML Layer Tag

html 5 tags,z-index html, Web/Pc/Os Info/guide, html z-index,tag manager,div position,data layer,



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.

Example

This example creates three overlapping layers. The back one is red, the middle one is blue, and the front one is green.

<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>
 
 
This will produce following result, it will work in Netscape 4 and higher versions.
layer 1
layer 2
layer 3

       Check Also : iLayer Tag (inflow layer Tag)


we can also control layers with css using z-index.

Layer on layer with z-index (Layers)

CSS operates in three dimensions - height, width and depth. We have seen the first two dimensions in previous lessons. In this lesson, we will learn how to let different elements become layers. In short, this means the order of which the elements overlap one another.
For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number.

Let us say we are playing poker and have a royal flush. Our hand can be presented in a way where each card has got a z-index:

In this case, the numbers follow on another (1-5) but the same result can be obtained by using 5 different numbers. The important thing is the chronological sequence of the numbers (the order).
The code in the card example could look like this:
	Royal Flush
	#ten_of_diamonds {
		position: absolute;
		left: 100px;
		top: 100px;
		z-index: 1;
	}

	#jack_of_diamonds {
		position: absolute;
		left: 115px;
		top: 115px;
		z-index: 2;
	}

	#queen_of_diamonds {
		position: absolute;
		left: 130px;
		top: 130px;
		z-index: 3;
	}

	#king_of_diamonds {
		position: absolute;
		left: 145px;
		top: 145px;
		z-index: 4;
	}

	#ace_of_diamonds {
		position: absolute;
		left: 160px;
		top: 160px;
		z-index: 5;
	}

Global Attributes

This tag supports all the global attributes.

Specific Attributes

The HTML <layer> tag also supports following additional attributes:
AttributeValueDescription
abovelayer nameThe name of the inline layer that will be positioned directly above the current layer in the z-order.
background URLA filename or URL for an image upon which the inline layer's text and images will appear.
below layer nameThe name of the inline layer that will be positioned directly below the current layer in the z-order.
bgcolor rgb(x,x,x)
#xxxxxx
colorname		The color to use for the inline layer background.
clip numberThe coordinates of the inline layer's viewable area.
height pixelsThe inline layer's height, in pixels.
left numberThe position of the left side of the inline layer. If the current inline layer is part of another layer.called the parent layer-then the position is relative to the parent layer.
name layer nameThe name of the inline layer.
pagex numberThe position of the left side of the inline layer relative to the browser window.
pagey numberThe position of the top of the inline layer relative to the browser window.
src URLThe URL of a page that will appear inside the inline layer.
top numberThe position of the top of the inline layer. If the current inline layer is part of another layer--called the parent layer--then the position is relative to the parent layer.
visibility show
hide
inherit		Determines whether the inline layer is visible.
width pixelsThe inline layer's width, in pixels.
z-index numberThe inline layer's position within the z-order. Inline layers with higher Z-INDEX values are positioned above inline layers with lower Z-INDEX values.

Posted in: , , , , , ,

0 comments:

Post a Comment