setBGIMG()
レイヤ−の背景画像を指定するサンプルファンクションです。
n4では
background.srcへ、
e5,e6,n6,n7,m1,o6,o7,s1は
backgroundImageへ画像ファイル名またはurlを代入することで指定します。
この時n4はスタイル定義でwidthとheightとclipが指定されていないとうまく背景画像を
表示してくれませんので要注意です。また、n4はCSSのbackground-image
も機能しませんので、はじめから画像を表示したい時はこのファンクションをonloadで起動させて使います。
また、画像無しの設定はo6では使えません(o7は使えます)。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合
Syntax : setBGIMG('レイヤ−名','画像ファイル名')
function setBGIMG(layName,image){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
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
}
Example
<script type='text/javascript'>
<!--
// 画像の事前読み込み
var bgimg = new Array()
bgimg[0] = new Image();bgimg[0].src='../moku.gif'
bgimg[1] = new Image();bgimg[1].src='../b4.gif'
function setBGIMG(layName,image){
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
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>
<!--↓このボタンをクリックすると//////////////////-->
<form>
<input type="button" value="木調"
onClick="setBGIMG('test',bgimg[0].src)">
<input type="button" value="メタル"
onClick="setBGIMG('test',bgimg[1].src)">
<input type="button" value="無し(n4,o6不可)"
onClick="setBGIMG('test','')">
</form>
<!--↓このレイヤ−の背景画像が変わります///////////////-->
<div id="test"
style="position : absolute ;
left : 50px ;
top : 70px ;
width : 400px ;
height : 200px ;
clip : rect(0,400,200,0) ;">
このレイヤ−の背景画像を変えます
</div>
//--オブジェクト名で処理する場合
上記の関数をレイヤー名の代わりにオブジェクトで処理するようにしたもの。
ブラウザ毎の実装オブジェクト処理が別立てになるので関数がシンプルになる。
Syntax : setBGIMGoj(オブジェクト,'画像ファイル名')
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
}
Example
<script type='text/javascript'>
<!--
// 画像の事前読み込み
var bgimg = new Array()
bgimg[0] = new Image();bgimg[0].src='../moku.gif'
bgimg[1] = new Image();bgimg[1].src='../b4.gif'
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
}
//--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]
}
//-->
</script>
<!--↓このボタンをクリックすると//////////////////-->
<form>
<input type="button" value="木調"
onClick="setBGIMGoj(getLayStyleOj('test'),bgimg[0].src)">
<input type="button" value="メタル"
onClick="setBGIMGoj(getLayStyleOj('test'),bgimg[1].src)">
<input type="button" value="無し(o6不可)"
onClick="setBGIMGoj(getLayStyleOj('test'),'')">
</form>
<!--↓このレイヤ−の背景画像が変わります///////////////-->
<div id="test"
style="position:absolute;left:50px;top:70px;
width:400;height:200;clip:rect(0,400,200,0)">
このレイヤ−の背景画像を変えます
</div>