×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

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  |