CSSによる画像切替（ロールオーバー）に成功！

以前のエントリー「#BLOG: CSSで画像を動的に切り替えるには？」で、横に画像を並べるタイプの画像切替（ロールオーバー）について書きました。そのときは、私の力だけでは完成せず、とは言ってもせっかく調べたので、調査内容をとりあえず公開していました。

すると親切にも、Momomoさんのブログ「Alternative Design Project」と、森田雄さんのブログ「securecatのMT」からトラックバックをいただき、いろいろと勉強させていただきました。

Momomoさんや森田雄さんのロールオーバー実現方法は……

<ul>タグと<li>タグを使って項目リストを作り、この<li>タグのリスト項目をブロック要素（改行されて1つのまとまりとなる要素）からインライン要素（改行されずにダラダラと後ろに続く要素）に変更して横に並べ、リスト項目の背景画像を動的に切り替えるという方法です。

この方法の詳細は以下のサイトを参照。
・Re: #BLOG: CSSで画像を動的に切り替えるには？ @ securecatのMT
・ADP: ADPでのCSSロールオーバー

この方法を使えば、Internet Explorer 6（IE）でもNetscape 7（NS）でもOpera 7.2（O）でも正常に実行できます。

ここで1つ気になる点は、見せたいのは背景画像だけなのですが、当然その背景の上には前景があり、前景には文字列が表示されているため、この文字列の色を背景色と同じにして目立たなくしたり、文字を極端に小さくしたりしています。しかしこれだと、見た目には隠れているように見えますが、検索エンジンには拾われてしまいます。私のサイトの場合、ページの先頭にメニューがあるので検索結果に表示される説明文がメニュー項目名ばかりになる可能性があり、できれば文字列は表示せずに画像だけにしたいという考えがありました。

そこで、以前のエントリーで作ったものをベースに、Momomoさんが紹介している「背景画像の位置をずらして表示する方法」を取り入れました。そして、前景には文字列ではなく、画像を使いました。この前景は、CSSを使って常に非表示にしています。もしCSSに対応していないブラウザなら、背景のロールオーバーができないかわりに、前景の画像が表示される仕組みです。

「背景画像の位置をずらして表示する方法」では、次の図ように、マウスの乗ってないときの画像と乗っているときの画像をくっつけて作成します。

そして、通常の時は上半分だけを背景画像として表示し、マウスが乗ると下半分を背景画像に表示します。

この方法による「横型のCSSロールオーバーのサンプル」は以下のページを参照してください。
・サンプル ページ表示

これはWindowsのIE、NS、OPと、MachintoshのIE、NSで動作します。（古いバージョンでは動作しない可能性あり。）

より詳しくは、サンプル ページのソース コードを見てください。ソース コードはブラウザの［表示］－［ソース］で参照できます。

私のサイトのメニューを全面的にこの方式に変更しました。これにより、Javascriptなどが格段に減り、ページのソース コード量がかなり少なくなりました。 ;)