画像置換のテスト

BIR-もうひとつの画像置換-とあるWEBクリエイターのblog

参考サイトを見てから、text-indent:-9999pxや、display:noneに頼らない画像置換を試したメモ。

今度まとめてみます。
試したHTMLはこんな感じ。
（IDめんどうだったのでHTMLセレクタのみで）

<div><h1><a xhref="#">あああ</a></h1></div>

<h2><a xhref="#"><span>いいい</span></a></h2>

どうしても三段構成なりそう。

CSSはこんな感じで。

div{
position:relative;
z-index:1;
}
h1 {
width:200px;
height:50px;
background:#f00;
}

h1 a{
display: block;
position:relative;
z-index: -1;
width:200px;
height:50px;
overflow: hidden;
background:#0f0;
}
h1 a:hover{
background:#ff0;
}

h2{
position:relative;
z-index:1;
}
h2 a {
display: block;
width:200px;
height:50px;
background:#00f;
}
h2 a span{
display: block;
position:relative;
z-index: -1;
width:200px;
height:50px;
overflow: hidden;
background:#f0f;
}
h2 a:hover{
background:#ff0;
}

二つともこれでテキストは隠れて背景色で表示できてる。
でもFirefox2.0以外は、上のアンカーに反応しなくなる。
テキストを背景画像（背景色）を被せて隠しつつ、アンカーを残すためにはどうしてもアンカー内に何か一つの要素が必要になる。
その要素のz-indexをいじるしかない。
空のspanタグが入らないだけまだマシか。

今回、背景色だが背景画像の場合でも全く同じで、いろんなところで論議されてる
「CSSが有効で画像表示を無効にしてるユーザー」に対してもテキストを表示させる事ができる。

Windows / IE,Firefox,
MAC / Safari,Opera,Firefox で確認。

まだまだ改良が必要。