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
