Javascript関連情報

更新日:2001年07月26日

クロスブラウザを制する Part 2 2-8 背景画像set

レイヤーの背景画像を変更するためのサンプルファンクション

| ★こんなことも出来ます(サンプル) | シリーズ目次 | 次のページ→|

レイヤーの背景画像を変更するためのサンプルファンクション。 setBGIMG()。


*




今回のサンプルはtable内に記述するとN4で
レイヤーが崩れる場合があるので念のため、
このペー ジ内へは記述しませんでした。
(IEやN6,MozはOKです)
こちらをご覧ください






setBGIMG('レイヤ-名',image)
Win n4 n6 moz e4 e5 e6,
Mac n4 n6 moz e4.5 e5 ,
Linux n4 n6 moz
レイヤーの背景画像を変更するためのサンプルファンクション。
<script language='JavaScript'>
<!--


  /*///////////////////////// 背景画像set用関数 ///  UseFree
  ===========================================================
   Win  n4 n6 moz e4 e5 e6,
   Mac  n4 n6 moz e4.5 e5,
   Linux n4 n6 moz
  ===========================================================
  input typ=button の場合はn4,Mac e4.5では動作しません。
  input typ=text  の場合はn4,Mac e4.5 e5では動作しません。
  textarea の場合はn4,Mac e4.5 e5では動作しません。


  使用例
  setBGIMG('レイヤ-名',image) //レイヤ-の背景画像を指定する
  Support http://game.gr.jp/js/
  =========================================================*/

  // 画像の事前読み込み
  var bgimg = new Array()
      bgimg[0] = new Image();bgimg[0].src='0.gif'
      bgimg[1] = new Image();bgimg[1].src='1.gif'

  function setBGIMG(layName,image){  
   if(document.getElementById)
     document.getElementById(layName).style.backgroundImage
                                           ='url('+image+')'
   else if(document.all)
     document.all(layName).style.backgroundImage
                                           ='url('+image+')'
   else 
   if(document.layers)
     document.layers[layName].background.src=image 
  }

  /*/////////////////////////// 背景画像set用関数ここまで */

//-->
</script>

<!--このレイヤ-の背景画像が変わります-->
<div id="a0" 
     style="position:absolute;left:50px;top:50px;
     font-weight : 900;
     font-size : 20px ;
     padding-left : 30px;
     padding-top : 30px;
     color:red;
     width:301;height:215;clip:rect(0,301,215,0)">
  <!--↓このボタンをクリックすると-->
  <form>
    <input type="button" value="  0  "  
           onclick="setBGIMG('a0',bgimg[0].src)">
    <input type="button" value="  1  "  
           onClick="setBGIMG('a0',bgimg[1].src)"> 
  </form>
↑<br>
ボタンをクリックすると<br>
レイヤ-の背景画像が<br>変わります
</div>

						
レイヤ-の背景画像を指定するサンプルファンクションです。 N4ではbackground.srcへ、IEやN6,MozillaはbackgroundImageへ画像ファイル名またはurlを代入することで指定します。この時N4はスタイル定義でwidthとheightとclipが指定されていないとうまく背景画像を表示してくれませんので要注意です。また、N4はCSSのbackground-image も機能しませんのではじめから画像を付けたい時はこのファンクションをonLoadで起動させて使います。


★次のページにサンプルと応用スクリプトを用意しました。 
| 次のページ→| シリーズ目次 |



1 2
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

高橋 登史朗

Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJa…

続きを読む

人気Javascriptランキング

Powered by 価格.com

おすすめ記事

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック