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

公開日:  最終更新日:2022/08/27

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

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

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

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

※デザインが変更されて現在は下記コンテツはなくなっています。
ヘッダー↓にあるの画像が並んでいるエリアを確認してもらうと、マウスオーバーで画像が切り替わる仕組みになっていますね。
28-1.png
ネットショップ等ではよく見かける表示方法だとは思いますが、インパクトがありお客さんの目を引く効果的なエリアになってますね。

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

サンプルソース

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

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

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

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


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

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

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

<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を使ったキャプション表示は別記事

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

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

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

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




Comment

  1. めい より:

    貴方もなります族なのですか!
    ちょっとがっかりなブログです・
    -----------------------------------—
    ショップオブザイヤー2012で(レディースファッション)ジャンル大賞を受賞されてるショップになります。
    -----------------------------------—
    なりますって、なる前は何だったのですか?
    なりますは、何かが変化して現在の形態を保つことですよね。
    正しい日本語は
    -----------------------------------—-
    ショップオブザイヤー2012で(レディースファッション)ジャンル大賞を受賞されてるショップです。
    -----------------------------------—-
    です、ます、で表現すれば、貴方の無教養さがばれずに済みますよ。

    • 匿名 より:

      それを言うなら「受賞されている」ではないでしょうか…。
      「い」は無くていいのですか?

      peacepopo様、こちらに記載されている情報活用させて頂きます!
      貴重な情報ありがとうございます。

  2. peacepopo より:

    めいさん
    ご指摘ありがとうございます。
    無教養さがばれないように気をつけます!

匿名 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑