はいけいへんこう

背景変更

レイヤーの背景色、背景画像を変更するScriptです。
Netscape6.x対応もしてみました。

Layer1
ここの部分の背景が変化します。

Layer2
マウスが乗ると背景が変化します。

Script解説
layer1はリンクでlayer2は自分自身のイベントで変更をかけていますが、呼び出される関数はほぼ同じです。
ポイントは、リンクの場合はレイヤーオブジェクトを取得する関数を用いるところ、
レイヤー関係がNetscape4.x系とIE系、Netscape6.x系で扱いが全く違うところかな。
前者はlayerオブジェクトで変更を行いますが、後者はDOMのstyleで変更を行います。
ちなみに背景を指定するStyleSheetは、

  背景色
  style="background-color:色名 or カラーコード"
  背景画像
  style="background-image:url('画像パス')"

となっております。それぞれ-color、-imageは省略可です。
と、ここの扱いもNetscape4.x系は違いっていて、このstyleは中に表示されてる文字の背景の指定になります。
Netscape4.x系でレイヤーの背景を指定するには、

  背景色
  style="layer-background-color:色名 or カラーコード"
  背景画像
  style="layer-background-image:url('画像パス')"

とする必要があります。

以下Script

Script部分

  <script>
    //レイヤーオブジェクトを取得する関数
    function getLayerObject(layerID){
      if (document.layers){
        return document.layers[layerID]
      }
      else if (document.all){
        return document.all(layerID)
      }
      else if (document.getElementById){
        return document.getElementById(layerID)
      }
    }
    
    //レイヤーの背景色変更
    function changeBackgroundColor(obj,color){
      if (document.layers){
        obj.bgColor = color;
      }
      else {
        obj.style.background = color;
      }
    }
    //レイヤーの背景画像変更
    function changeBackgroundImage(obj,url){
      if (document.layers){
        obj.background.src = url;
      }
      else {
        obj.style.background = "url('"+url+"')"
      }
    }
  </script>

HTML部分
リンク編

  <div id="layer1" 
       style="position:absolute;width:100;height:100;clip:rect(0,100,100,0);background-color:#bbffbb"
  >ここが変わる</div>
  <a href="javascript:void(0)"
     onMouseOver="changeBackgroundColor(getLayerObject('layer1'),'#ffbbbb')"
     onMouseOut ="changeBackgroundColor(getLayerObject('layer1'),'#bbffbb')"
  >色を変える</a>
  <a href="javascript:void(0)"
     onMouseOver="changeBackgroundImage(getLayerObject('layer1'),'sakaki.jpg')"
     onMouseOut ="changeBackgroundColor(getLayerObject('layer1'),null)"
  >画像を変える</a>

レイヤー編

  <div id="layer2" 
       style="position:absolute;width:100;height:100;clip:rect(0,100,100,0);background-image:url('yukari.jpg')"
       onMouseOver="changeBackgroundImage(this,'yomi.jpg')"
       onMouseOut ="changeBackgroundImage(this,'yukari.jpg')"
  >ここが変わる</div>
  
  <script>
  //NetScape4.xの場合layer2にイベントを定義
  if (document.layers) {
    document.layers['layer2'].captureEvents(Event.MOUSEOVER|Event.MOUSEOUT);
    document.layers['layer2'].onmouseover = function tmp(){changeBackgroundImage(this,"yomi.jpg")};
    document.layers['layer2'].onmouseout = function tmp(){changeBackgroundImage(this,"yukari.jpg")};
  }
  </script>

背景変更
WebSite ：JavaScriptの部屋別館
E-Mail 　：blaze@gol.com
最終更新日：2001/08/10