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

2019.11.14
JavaScript

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

オンマウス！ロールオーバー！

画像のボタンを使う時によく使いますねー

実装サンプル、JavaScriptだけで画像を切り替える
実装サンプル、jQueryを使って画像を切り替える
メモ
さいごに

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

See the Pen
JavaScriptだけで画像を切り替える by 125naroom (@125naroom)
on CodePen.

HTMLとJavaScriptはこちら

HTML

<a href="#" class="btn">
  <img src="https://125naroom.com/demo/img/btn_off.png" alt="BUTTON">
</a>

JavaScript

//マウスオーバー時の処理
function mouseOn(){
  var obj = document.getElementById("btn");
  obj.src = "https://125naroom.com/demo/img/btn_on.png";
}
 
//マウスアウト時の処理
function mouseOff(){
  var obj = document.getElementById("btn");
  obj.src = "https://125naroom.com/demo/img/btn_off.png";
}

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

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

下記のように画像の名前に『_off』と『_on』を付けるのをお忘れなく。
▽
btn_on.png
btn_off.png

See the Pen
【JavaScript】画像にマウスを合わせる（オンマウス）と、別の画像に切り替わる方法 by 125naroom (@125naroom)
on CodePen.

HTMLとJavaScriptはこちら

HTML

<a href="#" class="btn">
  <img src="https://125naroom.com/demo/img/btn_off.png" alt="BUTTON">
</a>

JavaScript

▽jquery-1.11.3.min.js使用

$(function () {
  function smartRollover() {
    if (document.getElementsByTagName) {
      var images = document.getElementsByTagName("img");
      for (var i = 0; i < images.length; i++) {
        try {
          if (images[i].getAttribute("src").match("_off.")) {
            images[i].onmouseover = function () {
              this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
            }
            images[i].onmouseout = function () {
              this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
            }
          }
        } catch (e) {
          //getAttributeで取得する属性が無かった場合、nullが返ってきてエラーになる為回避
        }
      }
    }
  }
  if (window.addEventListener) {
    window.addEventListener("load", smartRollover, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", smartRollover);
  }
});