ホーム > マークアップ > CSS > ロールオーバーで画像を切り替える
ロールオーバーで画像を切り替える
- 公開日
- 2007年01月06日
様々なやり方があるが、どれがベストなんだろう?
気にするポイントは、検索エンジン的に問題がないか?アクセシビリティは確保されているか?ソースが読みづらくないか?だと思う。
- JavaScriptを使う
- JavaScriptが有効でないと切り替わらないアクセシビリティの点とaタグにonmouseoverやonmouseoutの記述することでソースが読みづらくなる(DOMで回避する方法はあるが)点で問題がある。
- CSSを使って背景画像の表示場所を切り替える
-
- test-indentを使う(検索エンジン的にスパム扱いされる可能性がある)。
- aにCSSで一枚の背景画像を敷く。表示開始位置を「a」と「a:hover」で別にする。
- CSSを使ってvisibilityを操作する
- CSSを使ってロールオーバー時は、画像を非表示にしてaタグの背景画像が表示されるようにする。ポイントはaタグをブロックレベル要素にし、aタグのボックスサイズをaタグに括られた画像と同じにすること。
個人的に好きなのは3番目の手法、もしくはここでは紹介していないけどDOMを実装する方法かな。
- 参考
-
マウスオーバー時の画像置換
リストとナビゲーション「縦」編
基本のCSSを学んだ人が次に読む本 - 参考本
- web creators 2007/5
- この記事に関するご意見・ご感想をお待ちしております。
- この記事のトラックバックURL
- トラックバックは終了94