CSS でナビゲーション画像のロールオーバー設定

a:hover でのナビゲーションの画像表示の変更方法

一枚のナビゲーション画像を、通常時とロールオーバー時で表示を切り替える方法として、サンプル用画像として、この画像を使用。

今回は上半分を通常時、下半分をロールオーバー時用として作成。（画像ロード時の切り替え時のタイムロスを少なくするため）

サンプル html(body内)

<ul>
<li class="testClassName1"><a href="#">ナビメニュー１</a></li>
</ul>

サンプル css

<style type="text/css">
<!--
.testClassName a {
display: block; /* a をブロック化し、 */
width: 100px; /* 幅の設定と */
height: 50px; /* 高さの設定 */
background: url(naviImg.gif) no-repeat center top; /* 通常時の背景画像（上半分）の設定 */
text-indent: -1000em; /* テキストをマイナスインデントで飛ばす */
}
.testClassName a:hover {
background: url(naviImg.gif) no-repeat center bottom; /* ロールオーバー時の背景画像（下半分）の設定 */}
-->
</style>