ロールオーバーを円滑にしてくれるCSSスプライトについて、いまさらながらメモる。そもそも、CSSスプライトとはなにかというと、ロールオーバ時とそうでない時の2パターンの画像をひとつにまとめて、CSSでポジションを指定することによりロールオーバーを表示させるCSSのテクニック。ひとつのロールオーバーだけだと2画像が1画像になるだけなので、それほどメリットはないが、複数のロールオーバーの画像をまとめることでより効果があります。画像の数を減らすことにより、サイトの表示を速めることもできます。
自分的には、2画像でロールオーバーを実装した場合、ロールオーバー時にその画像を読み込むため一瞬白くなるのが嫌いなので、ロールオーバーに画像を使う場合はCSSスプライトを使っております。
では、サンプルとして一つの画像でロールオーバーを三種類作ってみます。
まず、画像を用意。
サンプルでは、ボタンの大きさを「150px x 60px」にしたので、それを基準に
・ ロールアウト時（通常時）
・ ロールオーバーその1
・ ロールオーバーその2
・ ロールオーバーその3
をまとめて画像を作成します。
html
<ul class="sample"> <li><a class="BottomLeft">Sample 1</a></li> <li><a class="TopRight">Sample 2</a></li> <li><a class="BottomRight">Sample 3</a></li> </ul>
css
ul.sample{
_zoom: 1;
overflow:hidden;
}
ul.sample li{
float: left;
margin-right: 10px;
}
ul.sample li a{
width: 150px;
height: 60px;
display: block;
background: url(images/css_sprite_sample.jpg);
cursor:pointer;
text-align:center;
line-height: 60px;
}
ul.sample li a.BottomLeft:hover{
background-position:left bottom;
}
ul.sample li a.TopRight:hover{
background-position:right top;
}
ul.sample li a.BottomRight:hover{
background-position:right bottom;
}