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

マウスオーバー時に画像を切替える。ロールオーバーという言い方をします。バナーや商品画像の上にマウスカーソルが移動した時に違う画像に切り替えたりするネットショップ等でよく見かける表示方法だとは思いますが効果的に使われているショップさんを見つけたので紹介します。

H27.10.7 追記
最近のスマートフォンからのアクセス増加に伴いショップのスマホ対策に力をいれているのではないでしょうか。スマホ対策がここまで必要になるとは予想してなかった人も多いのではないでしょうか。残念なことに、この記事で紹介している方法はスマホ画面では使えません。だってスマホだとマウスカーソルないですよね・・・・。でもスマホ用ページ、PC用ページと分かれている場合など、まだまだ使える場面は多いのではと思います。

マウスオーバーで違う画像に切り替えている参考ショップ

楽天のショップ イーザッカマニアストアズ
ショップオブザイヤー2012で（レディースファッション）ジャンル大賞を受賞されているショップです。

※デザインが変更されて現在は下記コンテツはなくなっています。
ヘッダー↓にあるの画像が並んでいるエリアを確認してもらうと、マウスオーバーで画像が切り替わる仕組みになっていますね。

ネットショップ等ではよく見かける表示方法だとは思いますが、インパクトがありお客さんの目を引く効果的なエリアになってますね。

本日は、CSSだけでマウスオーバー時に画像切り替えについて記述しますね。

サンプルソース

マウスオーバーで画像を切り替えるhtml、CSS

 
<a href="リンク先URL" class="link1"></a>

今回紹介する方法は仕組みとしては、aタグに背景画像を指定してマウスオーバー時に違う画像を表示するというシンプルな形です。

CSSで実装した動作サンプル

ポイントとしては、aタグに個別に名前をつけているところです。
(サンプルでは class=”link1″ の部分)

スタイルシートで個別にaタグに対しての記述をします。
a:link.link1{ ・・・ が 通常の表示
a:hover.link1{ ・・・ が マウスオーバー時
width、height は使用する画像サイズに合わせてください。

このサンプルでは１つしかリンクタグは記述してませんが、
複数の画像をレイアウトする場合は

＜a class=”link1″ 、＜a class=”link2″ 、＜a class=”link3″・・・・
といった感じでaタグに個別に名前を指定して、スタイルシートも同様に

a:link.link2{ ・・・ が 通常の表示
a:hover.link2{ ・・・ が マウスオーバー時
a:link.link3{ ・・・ が 通常の表示
a:hover.link3{ ・・・ が マウスオーバー時

とaタグの数に合わせて記述していきます。

ちなみにjavascriptでの実装サンプル

さきほどは、CSSでの実装方法を紹介しましたが、javascriptを使った方法での実装方法も紹介しておきます。javascriptだと難しそうと思うかもしれませんが、意外と簡単に実装できますよ。

マウスオーバーで画像を切り替えるjavascript

<a href="#">
  <img src="元画像URL" onmouseover="this.src='切替画像URL'" onmouseout="this.src='元画像URL'">
</a>

動作サンプル(javascript)

＜img＞タグにonMouseover=””、onMouseout=”” などのイベントを記述します。
this.src=”は マウスオーバー時に、自分自身(this）のsrcを変更するという処理をしています。同様にマウスアウトした時に元の画像に戻しています。

CSSでのサンプルでは、aタグの背景画像を切り替える方法だったのでaタグのない画像だけ配置している場合には使えません。このjavascriptでの実装方法であればimgタグ単体でも利用することが可能です。

動作としては、CSSもjavascriptも同様に画像を切り替えることが出来ます。
あとは、＜TABLE＞などを使って画像をレイアウトすれば、紹介したようなレイアウトを再現出来るかと思います。

お客さんの目を引くような画像を準備して、ぜひ活用してみてください。

マウスオーバー関連の別記事もよければご覧ください。

テーブルのマウスオーバー時に行やセルの背景色を変更して表を見やすくする方法

H26.9.4 画像マウスオーバーjQueryを使ったキャプション表示は別記事

ネットショップ運営の気になる備忘録

 

2 Users

6 Pockets

画像のマウスオーバー時にキャプションを表示 スライド、フェードも可能「mosaic.js」

H26.7.24 画像マウスオーバーjQueryを使ったカラー・白黒切り替えは別記事

ネットショップ運営の気になる備忘録

 

3 Pockets

マウスオーバー時に画像の白黒・カラーを切り替える「jQuery.BlackAndWhite」

H25.12.14 画像マウスオーバーについて別記事

ネットショップ運営の気になる備忘録

 

1 User

8 Pockets

CSSだけでマウスオーバー時の画像の見せ方色々・アニメーションも出来きてアクセン...

H25.9.4 画像マウスオーバーjQueryを使ったアニメーションについて別記事

ネットショップ運営の気になる備忘録

 

1 User

1 Pocket

jQueryだけで画像マウスオーバー時のアニメーション指定[ズーム・フェード・スライド]

H26.11.8 画像マウスオーバー時ランダム画像について別記事

ネットショップ運営の気になる備忘録

 

1 User

4 Pockets

マウスオーバー時の画像をランダムに切り替える方法