<script type='text/javascript'>
<!--
function resizeByLAYER(layName,offsetx,offsety){
if(window.opera){ //opera
var oj = document.getElementById(layName).style
oj.pixelWidth = oj.pixelWidth + offsetx
oj.pixelHeight = oj.pixelHeight + offsety
} else if(document.getElementById){ //e5,e6,n6,n7,m1用
var oj = document.getElementById(layName).style
oj.width = parseInt(oj.width) + offsetx+'px'
oj.height = parseInt(oj.height) + offsety+'px'
} else if(document.all){ //e4用
var oj = document.all(layName).style
oj.pixelWidth = oj.pixelWidth + offsetx
oj.pixelHeight = oj.pixelHeight + offsety
} else if(document.layers) //n4用
document.layers[layName].resizeBy(offsetx,offsety)
}
function setBGCOLOR(layName,color){
//opera は透明が効かないのでページ背景色と同色へ便宜修正
if(color=='')(!!window.opera)?color='white':color='transparent';
if(document.getElementById) //e5,e6,n6,n7,m1,o6用
document.getElementById(layName).style.backgroundColor =color
else if(document.all) //e4用
document.all(layName).style.backgroundColor=color
else if(document.layers){ //n4用
if(color=='transparent')color=null
document.layers[layName].bgColor=color
}
}
function setBGIMG(layName,image){
if(document.getElementById) //e5,e6,n6,n7,m1,o6用
document.getElementById(layName).style.backgroundImage
= (image=='')?'':'url('+image+')'
else if(document.all) //e4用
document.all(layName).style.backgroundImage='url('+image+')'
else if(document.layers) //n4用
document.layers[layName].background.src=(image=='')?null:image
}
//-->
</script>
<!--↓このレイヤ−のサイズが変ります///////////-->
<div id="lay0"
style="position : absolute ;
width : 100px ;/* ←必須 */
height : 50px ;/* ←必須 */
left : 100px ;
top : 100px ;">
T E S T
</div>
<form>
<input type="button" style="width:450px"
value="背景画像無し、背景色#ffcc00、幅+20px 高さ+10px にリサイズ"
onclick="setBGIMG('lay0','');
setBGCOLOR('lay0','#ffcc00');
resizeByLAYER('lay0',20,10)"><br>
<input type="button" style="width:450px"
value="背景画像有り、背景色無し、幅-10px 高さ-10px にリサイズ"
onclick="setBGIMG('lay0','./300300.gif');
setBGCOLOR('lay0','');
resizeByLAYER('lay0',-10,-10)">
</form>
* 緑文字が今回の関数
* 赤文字がこのスクリプトで最初に動作する部分
|
|
レイヤーの現サイズを基準にして指定したピクセル分変更するためのサンプルです。
CSSでwidth,heightの初期値をあらかじめ設定しておくことが必須です。
n4ではレイヤ−を移動させるメソッドresizeBy(x方向,y方向)を使い、
e4,e5,e6,n6,n7,m1ではプロパティwidth,heighへ値を代入していますが、
e4以外のW3C-DOM対応ブラウザでは値に単位がついているためparseInt()で数値化してから加算しています。
このサンプルでレイヤーの背景色と背景画像をそれぞれsetBGCOLOR()、
setBGIMG()で設定しているのは n4対策です。
n4ではbackground-color や background-imageを
CSSへ書き込むとレイヤーの背景色と背景画像がうまく設定されないバグがあります。
そこで、 CSSへは直接書かずに上記関数によって JavaScriptから設定しています。
o6は背景画像を書き出した後には背景色を上書きすることができません。
|
