【jQuery初心者向け】ホバーで画像切り替えを実装する方法

【jQuery初心者向け】ホバーで画像を切り替える方法

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • マウスオーバーした時に画像を切り替える方法が知りたい
  • jQueryのhoverメソッドを使ってみたい

という方のお悩みを解決します!

この記事で紹介する「hoverメソッドでimgタグのsrc属性の値を切り替える方法」を実践すれば、ホバー時の画像切り替えを実装することができるようになります!

それでは見て参りましょう〜!

src属性の値の一部を書き換える

今回、マウスオーバーの対象となるのは以下のHTMLです。

HTML
<img src="img_off.jpg" class="Item">

マウスオーバーした時に表示する画像ファイル名は、「img_on.jpg」にして用意しておきましょう。

  • マウスオーバー前の画像:img_off.jpg
  • マウスオーバー時の画像:img_on.jpg

上記のように「同じワード + on or off」で画像ファイルを命名することで、
onとoffの部分を書き換えるだけで画像を切り替えることができるので無駄がありません。

今回紹介するサンプルは、マウスオーバー前は犬の画像、マウスオーバー時はリスの画像を表示させる仕様です。

img_off.jpg マウスオーバー前の画像

img_on.jpg マウスオーバー後の画像


以下、jQueryで画像を切り替えるスクリプトとなります。

マウスオーバーjQuery
$('.Item').each(function() {

  let img_off = $(this).attr('src');
  let img_on = $(this).attr('src').replace('off', 'on');

  $(this).hover(
    function () {
      $(this).attr('src', img_on);
    },
    function () {
      $(this).attr('src', img_off);
    }
  );

});

マウスオーバー前の画像とマウスオーバー時の画像のsrc属性の値をあらかじめ変数にそれぞれ代入しておきます。

あとはjQueryのhoverメソッドで、画像がホバーされた時と外した時にsrcの値を用意しておいた変数に書き換えてやればOKです。

hoverメソッドの基本的な使い方は以下の通り。

hoverメソッド使用方法例
$(this).hover(
    function () {
      // マウスカーソルが要素内に入ったときに実行される処理
    },
    function () {
      // マウスカーソルが要素内から出たときに実行される処理
    }
  );

デモ

実際の動作はこちらのデモで確認してください〜!

See the Pen
poJKrRZ
by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、jQueryのhoverメソッドを使ってホバーに応じて画像を切り替える方法を紹介しました。

最後にもう一度内容を振り返って締めとします!

  • 画像切り替え時の命名は「同じワード + on or off」で行う
  • それぞれの状態の時の画像パスをあらかじめ変数に代入しておく
  • hoverメソッドの関数を2つ用いてsrc属性の値を入れ替える

「jQueryの基本的なメソッドや実践的な使い方も知りたい!」

という方は以下の記事も目を通してみてください〜!

【HTML、CSS、jQuery】オーバーレイとモーダルをシンプルに作る方法【HTML、CSS、jQuery】オーバーレイとモーダルをシンプルに作る方法 【jQuery初心者向け】クリックした要素の背景色や文字色をtoggleClassメソッドで変更する方法【jQuery初心者向け】クリックした要素の背景色や文字色をtoggleClassメソッドで変更する方法

コメントを残す

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