CSS で画像置換のサンプル

text-indent: -9999px; でテキストを飛ばす方法が過去のものになっています。
その代わりに、昔のように JavaScript を使って画像置換するのは今更…と思ったので CSS のみを使ってアクセシビリティを確保した画像置換方法がないか考えてみました。

画像は CSS Nite LP3 の課題のものを利用させていただいています。

サンプル

下の画像の上にポインタを持ってきてみてください。

使用した画像ファイル

わかりやすいように2pxのボーダーと背景色を設定 (#dbdbdb) しています。

viewmore.gif

HTML で利用した画像です。

viewmore-hover.gif

CSS の hover 時に利用した画像です。上半分が透明になっています。

HTML コード

<a href="#" class="viewMore">
  <img src="viewmore.gif" alt="過去の記事一覧を見る" width="142" height="20" />
</a>

CSS コード

a.viewMore {
  display: block;
  width: 142px;  /*画像の横幅*/
  height: 20px;  /*画像の縦幅*/
  background: transparent url("viewmore-hover.gif") no-repeat 0 0;  /*hover時の画像を読み込む*/
  text-decoration: none;
}
a.viewMore:hover {
  text-indent: -9999px;  /*hover時だけ画像を飛ばす*/
  background-position: 0 -20px;  /*背景をずらす*/
}

各 OFF 環境での動作

CSS OFF 時

イメージがそのまま表示される。
hover 時は変化なし。

画像 OFF 時

イメージの代替テキストが表示される。
hover 時は text-indent で文字が見えなくなる。

JavaScript OFF 時

変化なし。

気づいたこと

別にimg要素が隠してくれるから、上半分透明な背景画像を用意しなくてもいいかも。

サンプルのインデックスに戻る