ロールオーバーで画像を切り替える

様々なやり方があるが、どれがベストなんだろう？
気にするポイントは、検索エンジン的に問題がないか？アクセシビリティは確保されているか？ソースが読みづらくないか？だと思う。

JavaScriptを使う

JavaScriptが有効でないと切り替わらないアクセシビリティの点とaタグにonmouseoverやonmouseoutの記述することでソースが読みづらくなる（DOMで回避する方法はあるが）点で問題がある。

CSSを使って背景画像の表示場所を切り替える

1. text-indentを使う（検索エンジン的にスパム扱いされる可能性がある）。
2. aにCSSで一枚の背景画像を敷く。表示開始位置を「a」と「a:hover」で別にする。

CSSを使ってvisibilityを操作する

CSSを使ってロールオーバー時は、画像を非表示にしてaタグの背景画像が表示されるようにする。ポイントはaタグをブロックレベル要素にし、aタグのボックスサイズをaタグに括られた画像と同じにすること。

個人的に好きなのは3番目の手法、もしくはここでは紹介していないけどDOMを実装する方法かな。