memorandum

備忘録

2018.05.12

JSで画像をロールオーバー(マウスオーバー)させる

CSSのみで画像をロールオーバー(マウスオーバー)させるのはホームページ制作に関わっている人であれば大抵使用しますが、
切り替える画像が多い場合やCSSでコードを書くのが面倒な場合は、JSにてロールオーバーさせるのが効率がいい。

function smartRollover() {
  if (document.getElementsByTagName) {
    var images = document.getElementsByTagName("img");

    for (var i = 0; i < images.length; i++) {
      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."));
        }
      }
    }
  }
}

if (window.addEventListener) {
  window.addEventListener("load", smartRollover, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", smartRollover);
}

使用するには、ロールオーバー前の画像ファイル名を「**_off.jpg」とし、ロールオーバー後の画像ファイル名を「**_on.jpg」とする。
もちろん、画像形式はpngでもgifでもOK

MAIL制作・お見積りのご依頼
ご相談・お問い合わせ