マウスオーバー時の画像切り替え方法いろいろ

  • このエントリーをはてなブックマークに追加

ウェブの制作で、htmlにちょっと慣れてきたら向かいあう可能性の高い、マウスオンの時の画像切り替えの実装。

自分で把握しているだけで実装方法はいくつかあるが、実際に試してみたのでそのメリットデメリットをメモ。

1.オン用・オフ用の2つの画像をCSSのみで切り替える

aタグのバックグラウンドイメージでオフ用の画像を指定し
マウスオン時に読み込む画像をa:hoverのバックグラウンドで指定する方法。

html

CSS

●メリット
・JavaScriptなしで動く

●デメリット
・マウスオン時に、画像を読み込むまでの間、瞬間的に画像が何も表示されないことがよくある

2.オン用・オフ用の2つの画像をくっつけた1つの画像を作成し、CSSで表示位置を切り替える

100px x 100px の画像を縦に2つくっつけた、100px x 200pxの画像を作成した場合が以下。

html

CSS

●メリット
・JavaScriptなしで動く
・画像切り替えが速くスムーズ

●デメリット
・画像作成の手間がかかる
・ウェブの表示を拡大・縮小したりすると、ブラウザによってマウスオン時の画像の端が、マウスオフ時にも見えてしまうことがある

3.オン用・オフ用の2つの画像を、jQueryで切り替える

今の主流はこれなのでしょうか。

〇〇_off.gifとか〇〇_off.pngという画像あり、そこにマウスオンすると、自動的に
〇〇_on.gifとか〇〇_on.pngに切り替えてくれるという仕様。

html

●メリット
・実装が楽
・画像切り替え時に画像も消えない

●デメリット
・JavaScriptが動くことが必要
・画像切り替え時にややタイムラグあり(画像をプリロードすることで対処可能)

といったところかなと。


前後の記事

サブコンテンツ