なんにもない日の頭の中はこんなもんだったりする

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

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

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

きのこさん
オンマウス!ロールオーバー!
きのこさん
画像のボタンを使う時によく使いますねー

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);
  }
});

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery(英語版)

さいごに

きのこさん
ロールケーキが食べたくなってきましたー
きのこさん
買いに行きましょー
Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

AOI MIYAZAKI official website – 宮﨑あおい
naturalpermanent.com
12月10日
やんわりとした生活