resizeToLAYER()
レイヤーのサイズを修正するためのサンプルファンクションです。
n4ではレイヤ−を移動させるメソッド
resizeTo(幅,高さ)を使い、
e5,e6,n6,n7,m1,o7,s1ではプロパティ
width,heightへ、
e4,o6では
pixelWidth,pixelHeightへ値を代入しています。
このサンプルでレイヤーの背景色と背景画像をそれぞれsetBGCOLOR()、 setBGIMG()で設定していますが、
これは n4対策です。n4ではbackground-color や background-imageを
CSSへ書き込むとレイヤーの背景色と背景画像がうまく設定されないバグがあります。
そこで、 CSSへは直接書かずに上記関数によって JavaScriptから設定しています。
o6は背景画像を書き出した後には背景色を上書きすることができません。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合
Syntax : resizeToLAYER('レイヤ−名',幅,高さ)
function resizeToLAYER(layName,width,height){
if(navigator.userAgent.search(
"Opera(\ |\/)6") != -1 ){ //o6用
document.getElementById(layName).style.pixelWidth = width
document.getElementById(layName).style.pixelHeight = height
} else if(document.getElementById){ //e5,e6,n6,n7,m1,s1,o7用
document.getElementById(layName).style.width = width+'px'
document.getElementById(layName).style.height = height+'px'
} else if(document.all){ //e4用
document.all(layName).style.pixelWidth = width
document.all(layName).style.pixelHeight = height
} else if(document.layers) //n4用
document.layers[layName].resizeTo(width,height)
}
Example
<!--↓背景色セット関数///////////-->
<script type='text/javascript' src='../../lb/js/setbgcolor.js'></script>
<!--↓背景画像セット関数///////////-->
<script type='text/javascript' src='../../lb/js/setbgimg.js'></script>
<script type='text/javascript'>
<!--
function resizeToLAYER(layName,width,height){
if(navigator.userAgent.search(
"Opera(\ |\/)6") != -1 ){ //o6用
document.getElementById(layName).style.pixelWidth = width
document.getElementById(layName).style.pixelHeight = height
} else if(document.getElementById){ //e5,e6,n6,n7,m1,s1,o7用
document.getElementById(layName).style.width = width+'px'
document.getElementById(layName).style.height = height+'px'
} else if(document.all){ //e4用
document.all(layName).style.pixelWidth = width
document.all(layName).style.pixelHeight = height
} else if(document.layers) //n4用
document.layers[layName].resizeTo(width,height)
}
//-->
</script>
<!--↓このレイヤ−のサイズが変ります///////////-->
<div id="lay0"
style="position : absolute ;
left : 100px ;
top : 100px ;">
T E S T
</div>
<form>
<input type="button" style="width:450px"
value="背景画像無し、背景色cyan、 200×100にリサイズ"
onclick="setBGIMG('lay0','');
setBGCOLOR('lay0','cyan');
resizeToLAYER('lay0',100,100)"><br>
<input type="button" style="width:450px"
value="背景画像無し、背景色orange、300×50にリサイズ"
onclick="setBGIMG('lay0','');
setBGCOLOR('lay0','orange');
resizeToLAYER('lay0',300,50)"><br>
<input type="button" style="width:450px"
value="背景画像有り、背景色無し、300×200にリサイズ"
onclick="setBGIMG('lay0','./300300.gif');
setBGCOLOR('lay0','');
resizeToLAYER('lay0',300,200)">
</form>
//--オブジェクト名で処理する場合
上記の関数をレイヤー名の代わりにオブジェクトで処理するようにしたもの。
ブラウザ毎の実装オブジェクト処理が別立てになるので関数がシンプルになる。
Syntax : resizeToLAYERoj(オブジェクト,幅,高さ)
function resizeToLAYERoj(oj,width,height){
if(navigator.userAgent.search(
"Opera(\ |\/)6") != -1 ){ //o6用
oj.pixelWidth = width
oj.pixelHeight = height
} else if(document.getElementById){ //e5,e6,n6,n7,m1,o7,s1用
oj.width = width+'px'
oj.height = height+'px'
} else if(document.all){ //e4用
oj.pixelWidth = width
oj.pixelHeight = height
} else if(document.layers) //n4用
oj.resizeTo(width,height)
}
Example
<script type='text/javascript'>
<!--
function resizeToLAYERoj(oj,width,height){
if(navigator.userAgent.search(
"Opera(\ |\/)6") != -1 ){ //o6用
oj.pixelWidth = width
oj.pixelHeight = height
} else if(document.getElementById){ //e5,e6,n6,n7,m1,o7,s1用
oj.width = width+'px'
oj.height = height+'px'
} else if(document.all){ //e4用
oj.pixelWidth = width
oj.pixelHeight = height
} else if(document.layers) //n4用
oj.resizeTo(width,height)
}
//--layNameで指定したオブジェクトを返す(必ずonload後に実行すること)
function getLayStyleOj(layName){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
return document.getElementById(layName).style
else if(document.all) //e4用
return document.all(layName).style
else if(document.layers) //n4用
return document.layers[layName]
}
//--背景色セット
function setBGCOLORoj(oj,color){
//opera6 は透明が効かないのでページ背景色と同色(ここではwhite)へ便宜修正
if(color=='')(navigator.userAgent.search("Opera(\ |\/)6")!= -1)
?color='white':color='transparent'; //←このwhiteは背景色に書換える
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
oj.backgroundColor =color
else if(document.all)
oj.backgroundColor=color //e4用
else if(document.layers){ //n4用
if(color=='transparent')color=null
oj.bgColor=color
}
}
//--背景画像セット
function setBGIMGoj(oj,image){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
oj.backgroundImage = (image=='')?'':'url('+image+')'
else if(document.all) //e4用
oj.backgroundImage='url('+image+')'
else if(document.layers) //n4用
oj.background.src=(image=='')?null:image
}
//-->
</script>
<!--↓このレイヤ−のサイズが変ります///////////-->
<div id="lay0"
style="position : absolute ;
left : 100px ;
top : 100px ;">
T E S T
</div>
<form>
<input type="button" style="width:450px"
value="背景画像無し、背景色cyan、 200×100にリサイズ"
onclick="setBGIMGoj(getLayStyleOj('lay0'),'');
setBGCOLORoj(getLayStyleOj('lay0'),'cyan');
resizeToLAYERoj(getLayStyleOj('lay0'),100,100)"><br>
<input type="button" style="width:450px"
value="背景画像無し、背景色orange、300×50にリサイズ"
onclick="setBGIMGoj(getLayStyleOj('lay0'),'');
setBGCOLORoj(getLayStyleOj('lay0'),'orange');
resizeToLAYERoj(getLayStyleOj('lay0'),300,50)"><br>
<input type="button" style="width:450px"
value="背景画像有り、背景色無し、300×200にリサイズ"
onclick="setBGIMGoj(getLayStyleOj('lay0'),'../300300.gif');
setBGCOLORoj(getLayStyleOj('lay0'),'');
resizeToLAYERoj(getLayStyleOj('lay0'),300,200)">
</form>