createLAYER()
ページ構築後に、leftとtop、widthとheightを指定してabsoluteなレイヤーを生成します。
生成したレイヤーは、各クロスブラウザ関数で制御できます。
レイヤー名も自動生成され、オブジェクト名.id で取得できます。
参考:
ここに はぎさんによる高機能なcreateLayer()関数があります。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
Syntax :
レイヤーoj = createLAYER(left,top,width,height,html)
//e4,e5,e6,n4,n6,n7,m1,o7,s1用
function createLAYER(left,top,width,height,html){
//onload後に実行してください
//n4以外用レイヤー名を自動生成
if(!window.createLAYER.no)createLAYER.no = 0
var layName= '_js_layer_' + createLAYER.no
createLAYER.no++
//各ブラウザ毎の処理
var ua = navigator.userAgent
var o6 = ua.indexOf("Opera 6")!=-1 || ua.indexOf("Opera/6")!=-1
if( o6 ) return null //Opera6は無視
else if(document.getElementById){ //e5,e6,n6,n7,m1用
var layoj = document.createElement('div') //div生成
layoj.setAttribute('id',layName) //レイヤー名
layoj.innerHTML = html //HTML置換え
layoj.style.position = 'absolute' //positionセット
layoj.style.left = left + 'px' //left位置
layoj.style.top = top + 'px' //top位置
layoj.style.width = width + 'px' //幅
layoj.style.height = height + 'px' //高さ
//divをbodyへ追加
document.body.appendChild(layoj)
return layoj //生成したojを返す
} else if(document.all){ //e4用
var divstr = '<div id='+layName
+ ' style="position: absolute ;'
+ ' left : '+left+'px ;'
+ ' top : '+top+'px ;'
+ ' width : '+width+'px ;'
+ ' height : '+height+'px ;">'
+ html+'<\/div>' //HTML作成
//HTMLをbodyの最後尾へ挿入
document.body.insertAdjacentHTML('BeforeEnd',divstr)
return document.all(layName) //生成したojを返す
} else if(document.layers){ //n4用
var layoj = new Layer(width) //レイヤー生成
layName = layoj.name //レイヤー名
layoj.left = left //left位置
layoj.top = top //top位置
layoj.height = height //高さ
layoj.visibility = 'visible' //可視へ
//HTMLをレイヤーへ書き出す
document.layers[layName].document.open()
document.layers[layName].document.write(html)
document.layers[layName].document.close()
return layoj //生成したojを返す
}
return null //未対応ブラウザならnullを返す
}
Example
<script type='text/javascript'>
<!--
/*==================================================================
createLAYER()
absoluteなレイヤーを生成します。
生成したレイヤーは、各クロスブラウザ関数で制御できます。
-----------------------------------------------------------------
Syntax :
レイヤーoj = createLAYER(left,top,width,height, html )
-----------------------------------------------------------------
引数 :
レイヤーoj 生成されたレイヤーオブジェクト
left ドキュメント左端からのピクセル数
top ドキュメント上端からのピクセル数
width レイヤーの幅ピクセル数
height レイヤーの高さピクセル数
html レイヤー内のHTML
-----------------------------------------------------------------
戻り値 : レイヤーオブジェクト または未対応ブラウザならnull
-----------------------------------------------------------------
備考 :
* onload後に実行してください。
* レイヤーoj.idで自動生成されたレイヤー名を取得できます。
UseFree /Toshirou Takahashi/Update & Support : http://game.gr.jp/js/
==================================================================*/
//e4,e5,e6,n4,n6,n7,m1,o7,s1用
function createLAYER(left,top,width,height,html){
//onload後に実行してください
//n4以外用レイヤー名を自動生成
if(!window.createLAYER.no)createLAYER.no = 0
var layName= '_js_layer_' + createLAYER.no
createLAYER.no++
//各ブラウザ毎の処理
var ua = navigator.userAgent
var o6 = ua.indexOf("Opera 6")!=-1 || ua.indexOf("Opera/6")!=-1
if( o6 ) return null //Opera6は無視
else if(document.getElementById){ //e5,e6,n6,n7,m1用
var layoj = document.createElement('div') //div生成
layoj.setAttribute('id',layName) //レイヤー名
layoj.innerHTML = html //HTML置換え
layoj.style.position = 'absolute' //positionセット
layoj.style.left = left + 'px' //left位置
layoj.style.top = top + 'px' //top位置
layoj.style.width = width + 'px' //幅
layoj.style.height = height + 'px' //高さ
//divをbodyへ追加
document.body.appendChild(layoj)
return layoj //生成したojを返す
} else if(document.all){ //e4用
var divstr = '<div id='+layName
+ ' style="position: absolute ;'
+ ' left : '+left+'px ;'
+ ' top : '+top+'px ;'
+ ' width : '+width+'px ;'
+ ' height : '+height+'px ;">'
+ html+'<\/div>' //HTML作成
//HTMLをbodyの最後尾へ挿入
document.body.insertAdjacentHTML('BeforeEnd',divstr)
return document.all(layName) //生成したojを返す
} else if(document.layers){ //n4用
var layoj = new Layer(width) //レイヤー生成
layName = layoj.name //レイヤー名
layoj.left = left //left位置
layoj.top = top //top位置
layoj.height = height //高さ
layoj.visibility = 'visible' //可視へ
//HTMLをレイヤーへ書き出す
document.layers[layName].document.open()
document.layers[layName].document.write(html)
document.layers[layName].document.close()
return layoj //生成したojを返す
}
return null //未対応ブラウザならnullを返す
}
//-->
</script>
<form>
<input type = "button"
value = " Clickするとレイヤーが生成されます "
onclick= "oj=createLAYER(100,100,300,100
,'<font size=5>生成されたレイヤーです</font>')">
<br>
<input type = "button"
value = " 生成されたojレイヤーの名前は．．．"
onclick= "alert(oj.id)">
</form>