【JS・jQuery】マウスオーバーで画像を切り替える方法(プラグイン不使用)

ナビゲーションなど、ボタンをロールオーバーしたときに画像を違う画像に入れ替えたいといったことよくありますよね？
今回は、jQueryやJavaScriptで切り替えを実現する方法をご紹介します。プラグイン不使用、数行に記述で簡単に設置する方法をご紹介します。
また、画像とテキストの組み合わせのリンクの場合など、画像以外の要素がマウスオーバーされた時も画像を切り替えたいといった場合の対処方法もありますので。是非最後までご確認ください！

画像がマウスオーバーされた時に切り替える方法
リンクなど親要素がマウスオーバーされた時に画像を切り替える方法
imgタグに直接JavaScriptを設置する方法

画像がマウスオーバーされた時に切り替える方法

まずは、画像そのものがマウスオーバーされたときに切り替える方法です。
最初に画像を用意しておかなければならないのですが、その際マウスオーバー時に表示される画像の名称は、通常時の画像の名称に「_on」を語尾に追加したものにしてください。
例えば次のような感じです。

通常時　→　test.jpg
マウスオーバー時の画像　→　test_on.jpg

※画像末尾の「_on」に関しては、違うものを設定することもできますが、ひとまずこの形で説明を続けます。

ここからが、本題です、まずはサンプルのhtmlとjsをご確認ください。

html

<p><img src="imagees/test.jpg" class="over"></p>

1	<p><img src="imagees/test.jpg" class="over"></p>

$(function(){
  $(".over").mouseover(function(){
      $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-zA-Z]+)$/, "$1_on$2"))
  }).mouseout(function(){
    $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-zA-Z]+)$/, "$1$2"));
  })
});

$(function(){

$(".over").mouseover(function(){

$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-zA-Z]+)$/, "$1_on$2"))

}).mouseout(function(){

$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-zA-Z]+)$/, "$1$2"));

})

});

今回は、jQueryを使うので、jQueryの設置は必須です。必ず上記のjsより前に読み込むようにしてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

画像は、先ほど例にあげたtest.jpgを使用した例を示していますが、画像の名称はもちろん「test」以外でもOKです。　「.jpg」以外の「.png」や「.gif」などにも対応します。
仕組みを簡単に説明します。画像（img）のクラス名に「over」が設定されているとき、マウスオーバー時にimgタグの「src」に記載された画像の名称の語尾に「_on」が付与されます。これによりマウスオーバー用に用意された画像に表示が切り替わります。
「※」でコメント入れましたが、「_on」の名称に関しては変更が可能です。変更する場合はJｓの５行目「_on」の部分を任意のものに書き換えます。例えば「_on」を「_over」に書き換えたいなら次のようにします。

$(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)_over(\.[a-zA-Z]+)$/, “$1$2”));

これで、マウスオーバーされた時は「_over」付与された画像に入れ替わるようになります。

もちろんimgに付与するclass名も変更することもできます。変更したい場合はjsの２行目の「.over」を変更してください。例えばクラス名「over」を「btn」に変更していなら次のようにします。

$(“.btn“).mouseover(function(){

ここからは少し詳しい説明を加えておこうと思います。
今回用意したサンプルのjsでは、jQueryの「.replace()」を使って「src」の内容を書き換える作業をしているのですが、書き換える内容はjavascriptの正規表現というもので表記しています。Jsの3行目、「/^(.+) (\.[a-zA-Z]+)$」の部分はhtmlでいうところの「imagees/test.jpg」を表していて、「(.+)」で拡張子より前半部分の「imagees/ test」といった文字列、「(\.[a-zA-Z]+)」が後半の「.jpg」など「.」と「大小半角英字」で構成された文字列を判定しています。もし拡張子を「.jpg」に限定したいといったときは次のように書き換えることもできます。

$(function(){
  $(".over").mouseover(function(){
      $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.jpg)$/, "$1_on$2"))
  }).mouseout(function(){
    $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.jpg)$/, "$1$2"));
  })
});

$(function(){

$(".over").mouseover(function(){

$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.jpg)$/, "$1_on$2"))

}).mouseout(function(){

$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.jpg)$/, "$1$2"));

})

});

また、jsの3行目、５行目にみられる「$1」「$2」といった記号ですが、これは正規表現の「（）」の部分を表したもので「$1」は「(.+)」、「$2」は「(\.[a-zA-Z]+)」を表しています。jsの3行目のように「$1_on$2」とすることで、サンプルのhtmlでいう、「imagees/ test」と「.jpg」の間に「_on」を挿入するという表現になり、「$1 $2」で「_on」が含まれない状態という表現になります。

リンクなど親要素がマウスオーバーされた時に画像を切り替える方法

画像とテキストの組み合わせのリンクなど、画像の親要素にあたる部分がマウスオーバーされた時に画像を切り替えたい場合は次のように設定します。

html

<p><a href="#" class="over"><img src="imagees/test.jpg"><strong>テストボタン</strong></a></p>

1	<p><a href="#" class="over"><img src="imagees/test.jpg"><strong>テストボタン</strong></a></p>

$(function(){
  $(".over").mouseover(function(){
      $(this).children('img').attr("src",$(this).children("img").attr("src").replace(/^(.+)(\.[a-zA-Z]+)$/, "$1_on$2"))
  }).mouseout(function(){
    $(this).children('img').attr("src",$(this).children("img").attr("src").replace(/^(.+)_on(\.[a-zA-Z]+)$/, "$1$2"));
  })
});

$(function(){

$(".over").mouseover(function(){

$(this).children('img').attr("src",$(this).children("img").attr("src").replace(/^(.+)(\.[a-zA-Z]+)$/, "$1_on$2"))

}).mouseout(function(){

$(this).children('img').attr("src",$(this).children("img").attr("src").replace(/^(.+)_on(\.[a-zA-Z]+)$/, "$1$2"));

})

});

サンプル

テストボタン

画像のマウスオーバーとの違いは、html側では、キーになるクラスを親要素であるリンクタグに付けていることと、js側ではjQueryの「.children(‘img’)」でマウスオーバーされた要素の子要素であるimgを指定していることです。
それ以外の使い方は「画像がマウスオーバーされた時に切り替える方法」と同じです。

imgタグに直接JavaScriptを設置する方法

先ほどは、jQueryを使った方法をご紹介しましたが、javascriptで直接画像に設置する方法もご紹介します。
jQueryを使用する予定がないサイトだったり、マウスオーバーを設定したい箇所が限定的だったりする場合はこちらの方がお手軽かもしれません。

html

<p><img src="images/test.jpg" onMouseOver="this.src='images/test_on.jpg'" onMouseOut="this.src='images/test.jpg'" ></p>

1	<p><img src="images/test.jpg" onMouseOver="this.src='images/test_on.jpg'" onMouseOut="this.src='images/test.jpg'" ></p>

「onMouseOver」でマウスオーバーされたときの画像を、「onMouseOut」でマウスが離れたときにもどす画像をそれぞれ設定します。
これらの中に「this.src=’ここに置き換えたい画像のパス’」を記載するだけで簡単に設置できます。