本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます）

昔作ったサンプルでそんなようなのがありました。
横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現

CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。

  • ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。
  • アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。
  • その他、本来背景として使う予定だった画像を一枚にまとめる。

とかが、ぱっと浮かびました。

んで、グローバルナビゲーションに限っては、img要素で配置する事になんら問題を感じないので、img要素でいいんじゃないかなぁ、と。
もちろん状況によるので、ケータイ対応とかが前提だったりシステムの都合とかだったり状況にあわせて判断する必要はあると思うけど。

まぁCSS Spriteの目的が、容量軽減や負荷軽減なので、上手い具合に使って行けたらいいかなぁと思ったりしてる今日この頃です。

本題のimg要素のロールオーバーサンプル

基本、ロールオーバーはJavaScriptでいいとか思ってますが、使わなくても済むのならCSSのがやっぱり軽いので、グローバルナビゲーションみたいな部分はCSSでやって、単発のボタンとかは、以前紹介したソースがシンプルなJSによるロールオーバーを使うとかがいい気がするかもとか思ってる今日この頃。
まぁこれも状況に寄りけりなので一概には言えませんが。

ちなみに今回の方法はホップ本の350ページ辺りに書いてある内容とほぼ同じです。はい。
持ってない人はぜひ。すばらしい本です。

サンプルページとサンプルのDL

XHTMLは、img要素で普通にナビ用の画像を配置してるだけなので以下のようになってます。

<ul id="gNav">
<li class="productNav"><a href="/product/"><img src="./img/share/nav_product.gif" alt="製品情報" /></a></li>
<li class="serviceNav"><a href="/service/"><img src="./img/share/nav_service.gif" alt="サービス案内" /></a></li>
<li class="companyNav"><a href="/company/"><img src="./img/share/nav_company.gif" alt="会社情報" /></a></li>
<li class="pressNav"><a href="/press/"><img src="./img/share/nav_press.gif" alt="プレスリリース" /></a></li>
<li class="recruitNav"><a href="/recruit/"><img src="./img/share/nav_recruit.gif" alt="採用情報" /></a></li>
<li class="contactNav"><a href="/contact/"><img src="./img/share/nav_contact.gif" alt="お問い合わせ" /></a></li>
</ul>

いちいちclassが指定されてるのは、後述。
んで、CSSはこんな感じに。

#gNav {
	float: left;
	width: 800px;
	padding-left: 20px;
}
#gNav li {
	float: left;
	margin-right: 1px;
}
#header #gNav {
	background: url(../img/share/bg_nav.gif) no-repeat left bottom;
}
#header #gNav a {
	display: block;
	width: 129px;
	height: 55px;
}
#header #gNav a:hover {
	background: none;
}
.productBody #header #gNav li.productNav a img,
#header #gNav li a:hover img {
	width: 0;
	height: 0;
}

以下の部分は、IE6対策です。background-color: transparent; でも同様の効果が出ますが、transparentのスペルが覚えられません。。。

#header #gNav a:hover {
	background: none;
}

ホップ本では、ホバー時にコレまたいまだにスペルが覚えられない、visibility: hidden; を使って画像を消していますが、ボクなりなアレンジでは、imgのwidthとheightを0にすることで同様にしてます。

なんで、こうやったかといいますと、ただロールオーバーをさせるだけだったらvisibility: hidden;を使う方法で問題なかったんですが、現在のページをオーバーした状態（サンプルだと製品情報の部分）にさせておくのにコレを使うと、HPRでは読んでくれませんでした、、、ネットリーダーは良かったんだけど。

で、この方法はいずれにしろimg要素を見えなくして、ロールオーバー状態になっている背景画像を見せるという方法なのですが、この背景はグローバルナビゲーションの場合、一枚で切ってしまえば楽だと思うし、ぷちCSS Sprite にもなっていいです。
むしろ一枚にしないなら、今回の方法を使う意味がなくなってしまうー。

ナビゲーション部分のソースを変えれない場合にも有効

JavaScriptをあくまでも使わないとして話してますが、ボクの場合、ナビゲーション部分は必ずといっていいほど、別ファイル化してます。
なので、MTとか使ってない場合ページ毎でソースが変えれません。
そーすると、会社概要のページ見てるのに、会社概要のナビ部分がオーバーした状態になってくれないので、それを解決するためにli要素毎にclassを指定して、body要素のclassとあわせて振り分ける方法を使ってます。

この件に関しての詳細は以下をば。

あと、似たような状況で、JavaScriptでタブを実装している場合、li要素にclassが付いたりするのがよくあるんですが、タブ部分を画像にしてる場合とかに使えたりすると思うので、知ってて損は無いかなと思います。