Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a layer in HTML?
We can add a layer to an HTML document using the <layer> tag in HTML. Once we have created a layer using this tag, then we can manipulate it using JavaScript. This 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.Following is the usage of <layer> tag in HTML -
<LAYER SRC="frame.gif" ABOVE="bg" NAME="frame" WIDTH=200 HEIGHT=200>
Attributes of the <layer> tag
Above − The above attribute in layer tag specifies the name of above layer when compared to current layer. Following is the usage of above tag in <layer> −
<LAYER SRC="pic.jpg" Z-INDEX=1 NAME="flower" VISIBILITY=SHOW> <LAYER SRC="tree.gif" ABOVE="flower" NAME="Tree">
Background − The background attribute specifies the absolute or relative location of image that the browser tiles as background of layer. Following is the usage of background in layer tag -
<LAYER Z-INDEX=5 NAME="info" BACKGROUND="logo.gif"> <h1>Hi there</h1> </LAYER>
Below − The below attribute used to specify the name of layer below the current layer. Following is the usage of below in layer tag -
<LAYER BACKGROUND="floor.jpg" NAME="floor" UNDER="Car"></LAYER>
bgcolor − The bgcolor attribute specifies the background color of layer. It uses either the hexadecimal values of RGB or color names. Following is the usage of bgcolor in layer tag.
<layer bgcolor=#ff0011>
<div align=center>
<h1><blink>eat at joes!</blink></h1>
</div>
</layer>
clip − The clip attribute indicates the dimensions of a clipping rectangle which specifies the visible areas of layer. Areas that are present outside the rectangle becomes transparent. Following is the syntax of clip attribute in layer tag
<layer src="pic.jpg" clip="40%,40%"></layer>
Height − The height attribute specifies the vertical dimension of layer. Following is the usage of height attribute in layer tag.
<layer src="car.gif" above="bg" name="car" width=200 height=200></layer>
left − The left attribute specifies the horizontal position relative to left edge of parent layer. for vertical positioning we use top. Following is the usage of left attribute in layer tag.
<layer left=100 top=150> this layer is at {100,150}</layer>
name − The name attribute is used to give the name to layer which differentiates from other codes. Following is the usage of this attribute.
<layer src="car.gif" name="carpic" above="road"></layer>
src − The src attribute specifies the relative or absolute location of image file or file with contents of layer. Following is the usage of src attribute in layer tag.
<layer src="logo.jpg"></layer>
top − The top attribute specifies layers’ vertical position relative to top edge of parent layer.
<layer left=100 top=150>this layer is at {100,150}</layer>
visibility − The visibility layer specifies whether the layer is initially visible or not?
visibility=show // layer is initially visible
visibility=hide // layer is not initially visible.
<LAYER SRC="tree.gif" Z-INDEX=1 NAME="tree" VISIBILITY=SHOW>
Z-index − The z-index is used to specify whether the layer appears in stack layer or not. The <layer> is browser specific element which leads to confusion. To create layer effect we can use the z-index property of <div> tag.
<LAYER Z-INDEX=0 NAME="Bottom">You will not this text if other layers are above it.</LAYER>
Example
In the following example we are trying to add a layer to an HTML document using the <layer> tag −
<!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>
2K+ Views
