The JavaScript FAQ
Prev	Home	Next

Creating Layers

Question: How do I create a new layer from JavaScript?

Answer: Normally, you create layers by using DIV tags in the HTML source code of your page. However, you can also create layers programmatically with JavaScript! Here's an example:

The above example has been created using this code:

<form>
<input type=button value="Create layer"
onClick="makeLayer('LYR1',200,10,100,100,'red',1,1)">
<input type=button value="Delete layer"
onClick="deleteLayer('LYR1')">
</form>

To create a new layer, this code calls the function makeLayer:

makeLayer(ID,left,top,width,height,color,visible,zIndex)

And here's the JavaScript source code of this function:

function makeLayer(id,L,T,W,H,bgColor,visible,zIndex) {
 if (document.layers) {
 if (document.layers[id]) {
 alert ('Layer with this ID already exists!')
 return
 }
 var LR=document.layers[id]=new Layer(W)
 LR.name= id
 LR.left= L
 LR.top = T
 LR.clip.height=H
 LR.visibility=(null==visible || 1==visible ? 'show' : 'hide')
 if(null!=zIndex) LR.zIndex=zIndex
 if(null!=bgColor) LR.bgColor=bgColor
 }
 else if (document.all) {
 if (document.all[id]) {
 alert ('Layer with this ID already exists!')
 return
 }
 var LR= '\n<DIV id='+id+' style="position:absolute'
 +'; left:'+L
 +'; top:'+T
 +'; width:'+W
 +'; height:'+H
 +'; clip:rect(0,'+W+','+H+',0)'
 +'; visibility:'+(null==visible || 1==visible ? 'visible':'hidden')
 +(null==zIndex ? '' : '; z-index:'+zIndex)
 +(null==bgColor ? '' : '; background-color:'+bgColor)
 +'"></DIV>'
 document.body.insertAdjacentHTML("BeforeEnd",LR)
 }
}

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

The JavaScript FAQ
Prev	Home	Next