rollover.js : foo_off.png に mouseover すると foo_on.png に切り替える

rollover.js

// rollover.js

(function () {
  function rolloverListener (event) {
    var target, relatedTarget, reg, src;

    target = event.target || event.toElement;
    relatedTarget = event.relatedTarget || event.fromElement;

    if (target.tagName === 'IMG') {
      reg = /_off(?=\.\w+$)/;
      src = target.src;

      if (reg.test(src)) {
        target.src = src.replace(reg, '_on');
      }
    }

    if (relatedTarget && relatedTarget.tagName === 'IMG') {
      reg = /_on(?=\.\w+$)/;
      src = relatedTarget.src;

      if (reg.test(src)) {
        relatedTarget.src = src.replace(reg, '_off');
      }
    }
  }

  if (document.addEventListener) {
    document.addEventListener('mouseover', rolloverListener, false);
  } else if (document.attachEvent) {
    document.attachEvent('onmouseover', rolloverListener);
  }

})();

下記URLで使い方を解説しています。

rollover.js
http://vird2002.s8.xrea.com/javascript/rollover.html