0から目指すWebマスター Web制作に関する備忘録
検索

CSS

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

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

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を実装する方法かな。