ロールオーバーエフェクトなんて無くなればいいのに

以前、画像置換法の問題点について書きましたが、時は過ぎ、すっかり画像置換法のお世話になっています・・ 通常と hover 時の画像を１枚にしておくとプリロードの必要がないので便利です。ですが、最近は再び、その問題点についての議論が諸処で巻き起こっているようです。

画像置換法の問題点は、印刷時に背景が印刷されない設定になっているブラウザがあることと、画像を意図的に非表示にしている場合（低速回線の場合など）に何も表示されないことです。ちょっと別な方法でロールオーバーできないか考えてみました。

通常はimg要素を表示し、hover 時にimg要素を消して背景に表示した hover 用画像が見えるようにします。

構造は普通にimg要素をa要素で囲みます。

<p id="sample">
  <a href="#">
    <img src="[ image file ]" alt="[ text ]" width="360" height="50">
  </a>
</p>

CSSは以下の通り。

img {
  border: 0;
}
p#sample a {
  display: block;
  width: 360px;
  height: 50px;
  background: url([ image file ]) no-repeat 0 0;
}
/* windows IE6 only \*/
* html p#sample a:hover {
  background: #fff url([ image file ]) no-repeat 0 0;
}
/**/
p#sample a:hover img {
  display: none;
}

Windows IE6 のみ、:hover 疑似クラスの子要素への指定が無視されるバグがあるので :hover 疑似クラス自体に背景を指定してこれを回避します。

画像ファイルの管理が、HTML側とCSS側に分かれてしまうのが難点ですが、印刷時に背景が消える事も無いですし、画像を無効化してもaltが表示されます。あ、hover 時はどちらにしても消えてしまいますね・・いまいち。

を使う事を見直してもいいのかもしれません。案外、一番アクセシブルな方法です。

そもそも、ロールオーバーエフェクトには、マウスをのせてみたらクリックできる事が『確認』できる以上の意味はないと思うんですが、なぜかウェブの世界では当たり前のように使われています。マウスをのせてみたら確認できるのではなく、マウスをのせる前にクリックできるかが容易に判別できるデザインをすることのほうが重要なんじゃないかと思う次第です。