【JavaScript】オンマウスで別の画像に切り替える

2019.11.14
更新 2026.10.27
デザインのメモ
JavaScript

オンマウスで別の画像に切り替えたいのですがー

ほうほう

実装サンプル、JavaScriptだけで画像を切り替える

画像にマウスを置く（オンマウス）と画像が切り替わる実装サンプルです。

コードを見る（HTML・CSS・JavaScript）

HTML

<a href="#" class="btn"><img id="btn" src="https://125naroom.com/demo/hover-swap/img/btn_off.svg" alt="BUTTON" width="240" height="150" onmouseover="mouseOn();" onmouseout="mouseOff();"></a>

CSS

.btn img {
  max-width: 100%;
}

JavaScript

//マウスオーバー時の処理
function mouseOn(){
  var obj = document.getElementById("btn");
  obj.src = "https://125naroom.com/demo/hover-swap/img/btn_on.svg";
}

//マウスアウト時の処理
function mouseOff(){
  var obj = document.getElementById("btn");
  obj.src = "https://125naroom.com/demo/hover-swap/img/btn_off.svg";
}

見本ページをひらく（JavaScript だけで）

実装サンプル、jQueryを使って画像を切り替える

ページ内に複数のボタンがある場合はとても便利です。

画像の名前に『_off』と『_on』を付けるのをお忘れなく。

btn_on.png
btn_off.png

コードを見る（HTML・CSS・jQuery）

HTML

<a href="#" class="btn"><img src="https://125naroom.com/demo/hover-swap/img/btn_off.svg" alt="BUTTON" width="240" height="150"></a>
<a href="#" class="btn"><img src="https://125naroom.com/demo/hover-swap/img/btn_off.svg" alt="BUTTON" width="240" height="150"></a>

CSS

.btn img {
  max-width: 100%;
}

jQuery

$(function () {
  // src に『_off.』が入っている画像だけ、マウスが乗ったら『_on.』に切り替える
  $('img[src*="_off."]').on('mouseenter', function () {
    $(this).attr('src', $(this).attr('src').replace('_off.', '_on.'));
  }).on('mouseleave', function () {
    $(this).attr('src', $(this).attr('src').replace('_on.', '_off.'));
  });
});

見本ページをひらく（jQuery を使って）