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

【JavaScript】オンマウスで別の画像に切り替える
オンマウスで別の画像に切り替えたいのですがー
ほうほう

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

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

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

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

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

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

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

btn_on.png
btn_off.png

See the Pen jQueryを使って画像を切り替える by 125naroom (@125naroom) on CodePen.

HTML

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

jQuery

$(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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

さいごに

ロールケーキが食べたくなってきましたー
買いに行きましょうー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)