画像１枚でロールオーバー

今まで１つのボタンにわざわざ２枚の画像を用意してロールオーバーさせていました；
どのボタンのロールオーバーの画像だかわからなくなっちゃったりしたので１枚の画像でできるロールオーバーを紹介したいと思います。

画像はロールオーバーしたものも一緒にして１枚で保存します。

html

まずはulとliにidを指定します。

<ul>
          <li><a href="#">button</a></li>
          <li><a href="#">button2</a></li>
          <li><a href="#">button3</a></li>
          <li><a href="#">button4</a></li>
</ul>

css

全体のソース

ul#navigation {
          width:660px;
          margin:0;
          overflow:hidden;　/*float解除*/
          zoom:100%;　/*float解除*/
      }

      #navigation li {
          float:left;
          list-style:none;
      }

      ul#navigation li a {
          display:block;
          height:50px;
          width:165px;
          text-indent:-9999px;
      }

ボタンのソース

#navi1 a:hover{ background:url(../images/common/navi1.gif) no-repeat;
			padding-top:50px;
			margin-top:-50px;}

今回間違えて同じラベリングで作っちゃいましたが#navi2や#navi3にも同様にコピペしてimage背景を変えれば出来上がりです＾＾

他にも全体のボタンを丸ごと１枚で保存してｃｓｓで場所を指定する方法もありました。
もしかしたらそっちのほうが１枚ですしいいかもしれない…いつかやってみようかと思います＾＾

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。