cssスプライトをjQueryと組み合わせて
使用するAutoSpritesをご紹介します。
軽量化できるので人気のあるcssスプ
ライトにjQueryを加える事でより豊かな
表現が可能になりますね。

HTMLソースも綺麗なまま使えますのでなかなか使えそうです。問題のIE6、7での実装もクリアしていますよ。

AutoSprites

フェードするエフェクトがクールですね。

cssスプライトを使用しており、3種の画像を使って表現しています。

マークアップ

HTMLのマークアップは以下のようにシンプル。

<ul id="hnav">
<li id="hnavhome"><a href="#">Home</a></li>
<li id="hnavlocal"><a href="#">Local Industry</a></li>
<li id="hnavhigher"><a href="#">Higher Education</a></li>
<li id="hnavcomm"><a href="#">Our Community</a></li>
<li id="hnavnews"><a href="#">News</a></li>
</ul>

cssはcssスプライトを使います。

#hnav { position: absolute; top: 0; left: 0; width: 615px; height: 72px; background: url('horiz_sprites.gif') no-repeat; }
#hnav li { position: absolute; left: 0; height: 72px; }
    #hnav #hnavhome { width: 82px; left: 0px; }
    #hnav #hnavlocal { width: 146px; left: 82px; }
    #hnav #hnavhigher{ width: 162px; left: 228px; }
    #hnav #hnavcomm { width: 143px; left: 390px; }
    #hnav #hnavnews { width: 82px; left: 533px; }
#hnav li a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 72px; text-indent: -9999em; }

オプションでフェードのスピードも調整できるみたいです。以下でデモの確認とDLが可能ですのでぜひチェックしてみてください。

AutoSprites