目次

オブジェクトなJavaScriptの基礎講座

画像の切り替え3(DHTML)

◆ はじめに

JavaScriptの機能をマイクロソフトとネットスケープが各々に独自勝手に拡張した機能の大部分をDHTMLといいます。

したがって、この機能(DHTML)使う時は、2種類対応のロジックで、かつ各々が影響しないように記述します。(なんと面倒くさい!)

今回は、DHTMLの画像の切り替えを勉強しましょう!

しかし、今は、DOMの時代になってきていますので、DHTMLは、覚えてもあまりメリットがないです...。

◆ スクリプト実行結果

まずは、クリックしてください。すると左上の画像がかわります。

◆ スクリプト

<script type="text/javascript">
<!--
function setBGIMG(layName,image){  
    if(document.layers){              //  ネスケ用
       document.layers[layName].background.src=image 
    }
    else{
      if(document.all){                //  IE用
         document.all(layName).style.backgroundImage='url('+image+')'
      }
      else{
         alert("このブラウザは、本機能未対応!!");
      }
    }
}
// -->
</script>
<DIV ID="gazou"  
     STYLE="position:absolute;left:0px;top:0px; 
     width:300;height:340; visibility: visible; background-image: url(V0.gif); layer-background-image: url(V0.gif); border: 1px none #000000">  
</DIV> 
  
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>    
<FORM>
<p>まずは、クリックしてください。すると左上の画像がかわります。</p>
<p>
<input type="button" name="button9" value="0->9" onClick="setBGIMG('gazou','V9.gif')">
<input type="button" name="button0" value="9->0" onClick="setBGIMG('gazou','V0.gif')">
</p>
</FORM>

◆ スクリプト説明

まず、HTMLのソースから説明いたします。

DIV開始タグで、矩形のオブジェクトを作成します。(正確には、IEはallコレクション、ネスケはレイヤーズオブジェクトを作成)
属性は、background-image: url(V0.gif);がIE専用で、layer-background-image: url(V0.gif);がネスケ専用です。それ以外は共用です。
詳しくは、スタイルシートの基礎知識スタイルシートの簡易リファレンスを参照して下さい。

<BR>が沢山入っているのは、レイヤーとボタンが重ならないようにです。(重なるとonClickが無視される為)
そして、ボタンがクリックされると関数setBGIMGが実行されます。

次にJavaScriptのソースの説明です。

if(document.layers)で、ネスケかチェックです。
ネスケの時は、document.layers[layName].background.src=imageで画像データを入替えます。

if(document.all)で、IEかチェックです。
IEの時はdocument.all(layName).style.backgroundImage='url('+image+')'で画像データを入替えます。

目次