JavaScript:マウスオーバー(背景画像) JavaScript web design

マウスオーバー(背景画像)

 サンプルプレビュー
JavaScript:マウスオーバーで背景画像を変える
 コード
スタイルシート部分
.j1-box      { text-align: center }
.j1-box1     { margin:0px auto;
               text-align:left;
               width:300px;
             }
.j1          { float: left;
               width:100px;
               background: url(images/e0.gif);
               margin-right: 1px;
               text-align: center;
               height: 30px;
             }
.j11         { margin-top: 9px }
a.menu       { color: #fff;
               text-decoration: none;
               padding: 9px 0px;
               width: 100px;
               height: 21px;
               display: block;
             }
a:hover.menu { color: #039 }
a:active.menu{ color: #900 }
.j1-moji     { clear: left; padding:5px }
JavaScript部分
var img = new Array();
img[0]=new Image();img[0].src="images/e0.gif";
img[1]=new Image();img[1].src="images/e1.gif";

function b(x,y){
 if(document.getElementById){
  document.getElementById(x).style.backgroundImage=
   'url('+img[y].src+')';
 }
 else if(document.all){
  document.all(x).style.backgroundImage=
   'url('+img[y].src+')';
 }
}
html部分
<div class="j1-box">
 <div class="j1-box1">
  <div id="um1" class="j1">
   <div class="j11">
    <a href="#" onMouseOver="b('um1','1')"
     onMouseOut="b('um1','0')" class="menu">
     menu1</a></div>
  </div>
  <div id="um2" class="j1">
   <div class="j11">
    <a href="#" onMouseOver="b('um2','1')"
     onMouseOut="b('um2','0')" class="menu">
     menu2</a></div>
  </div>
  <div id="um3" class="j1">
   <div class="j11">
    <a href="#" onMouseOver="b('um3','1')"
     onMouseOut="b('um3','0')" class="menu">
     menu3</a></div>
  </div>
  <div class="j1-moji">JavaScriptに〜</div>
 </div>
</div>
※スタイルシート部分は01マウスオーバー(背景色)とほぼ同じです
※JavaScript部分でのdocument.allはIE4.0用です
※コードでaタグでtitleを省略しております、またコードの途中で改行しております

※NN4、IE4.5(Mac)以前のブラウザに対応しておりません。(ウィンドウズのIE5/IE5.5/IE6だけででシェア95%と言われいる為です)

※記述は独自で制作したものであり、正規な記述方法では無い場合があります。また間違っている所やもっと良い方法等ありましたらご連絡下さい。
|   Link  |   Profile  |   Sitemap  |