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

マウスオーバー(背景色)

 サンプルプレビュー
JavaScript：マウスオーバーで背景色を変える
 コード
スタイルシート部分 
.j1-box       { text-align: center }
.j1-box1      { margin:0px auto;
                text-align:left;
                width:333px;
              }
.j1           { float: left;
                width:109px;
                background-color: #999;
                margin-right:1px;
                text-align: center;
                height:30px
              }
.j11          { margin-top: 9px }
a.menu        { color: #fff;
                text-decoration: none;
                height:21px;
                width: 110px;
                display: block
              }

a:hover.menu  { background-color: #b03 }
a:active.menu { background-color: #d03 }
.j1-moji      { clear: left; padding:5px }
JavaScript部分 
var bg;
function b(x,y){

 if(y==1){ bg ="#b03";}
 else { bg = "#999"; }

 if(document.getElementById){
  document.getElementById(x).style.background=bg;
 }
 //IE4用
 else if(document.all){
  document.all(x).style.background=bg;
 }
}
html部分 

<div class="j1-box">
 <div class="j1-box1">
  <div class="j1" id="bgbg1">
   <div class="j11">
    <a href="#" onMouseOver="b('bgbg1','1')"
     onMouseOut="b('bgbg1','0')"
     class="menu">menu1</a>
   </div>
  </div>
  <div class="j1" id="bgbg2">
   <div class="j11">
    <a href="#" onMouseOver="b('bgbg2','1')"
     onMouseOut="b('bgbg2','0')"
     class="menu">menu2</a>
   </div>
  </div>
  <div class="j1" id="bgbg3">
   <div class="j11">
    <a href="#" onMouseOver="b('bgbg3','1')"
     onMouseOut="b('bgbg3','0')"
     class="menu">menu3</a>
   </div>
  </div>
  <div class="j1-moji">スタイルシートの〜</div>
 </div>
 </div>
※動作はaタグを包むdivボックスの背景色を変えております。
※コードでaタグのtitleを省略しております。またコードは途中で折り返してます。
※IE4(win)に対応している為、スタイルシートが複雑になっております。(IE4未対応の簡単仕様はスタイルシートの制作の背景色を変えるを参照ください)

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

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