Roll OverのJava Scriptライブラリが普及してる今、画像置換(Image  Replacement)を使用するケースは減っているのでしょうか？JSによるRoll Overはお手軽だけど、グローバルナビの配下に属するローカルページを表示している間もグローバルナビの状態をカレントにしておきたい場合などがありますよね。

JSによるRoll Overを利用する場合にそれを実現する場合、yuga.js0.6.0を使用するかグローバルナビの項目の数だけカレント状態になったコードを用意することになるかと思います。でもやはりグローバルナビなんかはDreamweaverユーザーならライブラリとかで1つのソースコードで管理したくなりませんか？

なのでやっぱり画像置換を...と思ってしまう訳です。でもtext-indent: -9999px;とかなんかやだなってな場合、もう一つheight: 0;で画像置換する方法があります。

例えば1つのナビゲーションボタンが横130px、高さ30pxの場合は次のようなコードになります。

#glovalNav li#home a {
     padding-top: 30px
     width: 130px;
     height: 0;
     overflow: hidden;
     display: block;
     background: url(hoge.gif) no-repeat 0 0;
}
#glovalNav li#home a:hover { background: url(hoge.gif) no-repeat -30px 0; }
#glovalNav li#home a.current { background: url(hoge.gif) no-repeat -60px 0; } 

高さを0pxにして画像の高さ分をpadding-topで指定してあげます。Appleのサイトなんかはこの方法の画像置換を使ってますね。

何となくtext-indent: -9999pxよりは気分がすっきりするのは自分だけでしょうか...