Web事業部実績紹介
Web事業部実績紹介
2010.10.28

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

はやち

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

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

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背景を変えれば出来上がりです^^

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