<html>
<head>
<title></title>
<script type='text/javascript'>
<!--
/*==============================================================*/
/*////////////////// 以下はクロスブラウザ汎用処理 //////////////*/
/*////////////////// createLAYER-UseFree- //////////////*/
/*==================================================================
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を返す
}
/*////////////////// moveLAYER-UseFree- //////////////*/
function moveLAYER(layName,x,y){
if(document.getElementById){ //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.left = x
document.getElementById(layName).style.top = y
} else if(document.all){ //e4用
document.all(layName).style.pixelLeft = x
document.all(layName).style.pixelTop = y
} else if(document.layers) //n4用
document.layers[layName].moveTo(x,y)
}
//-->
</script>
<form>
<input type = "button"
value = " クリックするとレイヤーが生成されます "
onclick= "oj=createLAYER(100,100,300,100
,'<font size=5>生成されたレイヤーです</font>')">
<br>
<input type = "button"
value = " 生成されたojレイヤーを移動する"
onclick= "moveLAYER(oj.id,200,200)">
</form>
</body>
</html>
|
