create a new layer from JavaScript


Generally layers will be created using DIV tags Using CSS in the HTML source code of your page. However, you can also create layers programmatically with JavaScript also.

Check the following Example.
 

<form>
<input type=button value="Create layer"
onClick="makeLayer('LYR1',150,10,150,100,'blue',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)
 }
}



Added on September 12, 2007 Comment
}