ロールオーバーサンプル: CSS編 (個別画像/text-indent:-9999px;)

CSSでテキストを背景画像に置き換える事から、一般に画像置換と呼ばれてる手法。
昔から賛否両論・いろいろ論議されてますが、最近は「使いたければ使えばいいんじゃない？」という感じです。

メリット
- CSSだけ制御できるため、HTMLソースに手を加える事が少ない。管理も楽。
- JavascriptがOFFな環境(セキュリティが厳しい企業等)でもロールオーバーが実現できる。
- 携帯ブラウザ等、CSSが利用できないブラウザではシンプルなテキストのリンクとして表示される。
- いろんな手法が編み出されてます。
デメリット
- 最初の一回だけちらつく。
  - マウスオーバー時に画像を読み込むにいくため=プリロード(先読み)されてない
  - 一度読み込んでキャッシュされれば、二度と起きない。
- ボタンは背景画像なので、ユーザーの設定次第では印刷されない。(デフォルト設定では印刷されない)
- 「画像：OFF、CSS：有効」な設定のブラウザ（一部のモバイルPCのユーザー等）では、
  ボタンがどこにあるかわからなくなる。(テキストを移動させて、背景画像が表示されないから)
  - 「そんなユーザーは多い／少ない」ではなく、「そんなユーザーがいる」事実が大事の考え方。
- text-indentを負の方向に表示させるのは本来の使い方では無い。
- 「CSSでエフェクト（動き）を制御する必要があるのか？」という根本的な疑問。
- 将来、「隠しリンクは検索エンジンでスパム」と扱われる可能性がある。

参考サイト）