CSSで作る画像のロールオーバー

CSS Happylife様の
Javascriptを使わずにやるimg要素のロールオーバーサンプル
のエントリーを拝見しまして、
ロールオーバーの新しいやり方を発見したので、
今まで使っていたやり方もあわせてご紹介します。

1. 画像をCSSの背景として指定する場合(文字ナビゲーションなし)
2. 画像をCSSの背景として指定する場合(文字ナビゲーションあり)
3. 画像をimgタグでHTMLにはりつける場合

１．CSSの背景に画像を指定し、画像にカーソルをあてたときに画像が替わるようにする。

→サンプルを見る
CSSでaの背景にメニュー画像を、a:hoverでロールオーバー用の画像をそれぞれ指定します。
欠点は、aタグの中に文字情報が全くないため、CSSを無効にした場合は何も表示されなくなってしまうこと。メニューについての情報がHTMLの中に全く入っていないので、アクセシビリティが非常に低いです。

２．１．の方法に加えて、aタグの中に文字情報を加え、CSSで文字を非表示にする

→サンプルを見る
さっきとは違い、aタグの中にHomeとかContactなどの文字情報が入っています。これをCSSで、text-indentプロパティを負の値（-9999px）に指定することによって、文字を消しています。
しかし、Firefoxでリンクをクリックしたときに変な点線が表示されてしまいます。これは、text-indentで画面上から追いやった文字も含めてリンク先として囲まれてしまうからです。
今までずっとこの方式でやってきたので、この点線がすごく気になっていました。

３．imgタグでHTMLに画像を埋め込み、CSSで表示・非表示を変更する。

→サンプルを見る
これが、CSS HappyLife様で紹介されていた方法ですね。
やり方の概要は以下。

1. ul要素の背景にメニュー全体がロールオーバーしている状態の画像を指定。
2. a要素をブロック化(display: block)し、ロールオーバー前の画像を背景に指定。
3. リンクにカーソルを合わせたときに(a:hover)、img要素が表示されないように指定。

こちらのサイトでは、メニューが横に整列されていたので指定が簡単でよかったのですが、私のほうでどうしてもアンバランスなメニューをこの方式で表示してみたかったので、position: absolute　のプロパティを使ってやってみました。

HTMLコード

<ul>
    <li class="home"><a href="#">
        <img src="image/home.gif" alt="Home" width="x" height="y" />
    </a></li>
    <li class="contact"><a href="#">
        <img src="image/contact.gif" alt="Contact" width="x" height="y" />
    </a></li>
    <li class="coding"><a href="#">
        <img src="image/coding.gif" alt="Coding" width="x" height="y" />
    </a></li>
    <li class="about"><a href="#">
        <img src="image/about.gif" alt="About" width="x" height="y" />
    </a></li>
    <li class="works"><a href="#">
        <img src="image/works.gif" alt="Works" width="x" height="y" />
    </a></li>
    <li class="designing"><a href="#">
        <img src="image/designing.gif" alt="Designing" width="x" height="y" />
    </a></li>
</ul>


xには画像の幅、yには高さをそれぞれ指定するようにしてください。
指定しないと表示がスムーズにいかないことがあります。

CSSコード

ul {
    background: url(image/board2.gif) no-repeat;
    width: 500px;
    height: 200px;
    position: relative;
}

ul li a {
    display: block;
}
ul a:hover {
    background: none;
}
ul li a:hover img {
    visibility: hidden;
}

ul li.home a {
    width: 97px;
    height: 49px;
    position: absolute;
    top: 29px;
    left: 36px;
    z-index: 2;
}
ul li.contact a {
    width: 139px;
    height: 56px;
    position: absolute;
    top: 29px;
    left: 180px;
    z-index: 2;
}
ul li.coding a {
    width: 133px;
    height: 59px;
    position: absolute;
    top: 19px;
    right: 19px;
    z-index: 2;
}
ul li.about a {
    width: 96px;
    height: 41px;
    position: absolute;
    bottom: 32px;
    left: 48px;
    z-index: 2;
}
ul li.works a {
    width: 144px;
    height: 75px;
    position: absolute;
    bottom: 40px;
    left: 164px;
    z-index: 2;
}
ul li.designing a {
    width: 150px;
    height: 56px;
    position: absolute;
    bottom: 17px;
    right: 36px;
    z-index: 2;
}


ul要素を基準（position: relative）にして、a要素を絶対配置（position: absolute）で表示しています。

こんなやり方もあるんですね、という一例にどうぞ。