HOME - 可能な限りソースを汚さない安直なロールオーバースクリプト

可能な限りソースを汚さない安直なロールオーバースクリプト

特徴

HTMLのソースおよびJavaScriptの名前空間の汚染を極力回避しながらロールオーバーを実現するスクリプトです。onmouse*ハンドラやid属性を追加することなく、外部スクリプトを埋め込むだけで使えます。また、他のスクリプトの動作と衝突しません。

使い方

画像をロールオーバーさせるには、あらかじめ通常時の画像ファイルをfilename_normal.extension、ロールオーバー時の画像ファイルをfilename_active.extensionのようにリネームしておき（例：image_normal.pngとimage_active.png）、ソースに<script type="text/javascript" src="image_rollover.js"></script>を書き加えます。

制限

ファイルネームに基づいてロールオーバーの有無を判断するので、あらかじめリソースの名前や場所が固定されている場合には利用できません（適宜スクリプトを修正すれば対応は可能です）。

ソース（image_rollover.html）

<script type="text/javascript" src="image_rollover.js"></script>
<img src="image_normal.gif">

ソース（image_rollover.js）

(function () {
  var onload = function (e) {
    for (var i = 0; i < document.images.length; ++i) {
      if (document.images[i].src.match(/^(.*)_normal\.([^.]*)$/)) {
        (function (img, pre, ext) {
          var active = new Image(); active.src = pre + '_active.' + ext;
          var normal = new Image(); normal.src = pre + '_normal.' + ext;
          var onmouseover = function (e) { img.src = active.src; }
          var onmouseout = function (e) { img.src = normal.src; }
          try {
            img.addEventListener('mouseover', onmouseover, false);
            img.addEventListener('mouseout', onmouseout, false);
          }
          catch (e) {
            img.attachEvent('onmouseover', onmouseover);
            img.attachEvent('onmouseout', onmouseout);
          }
        })(document.images[i], RegExp.$1, RegExp.$2);
      }
    }
  }
  try {
    window.addEventListener('load', onload, false);
  }
  catch (e) {
    window.attachEvent('onload', onload);
  }
})()

動作サンプル

関連情報

オブジェクト指向JavaScript