• 各画像の name（あるいは、id）属性にそれぞれ異なった値（名前）を指定しなければならない。
• 各画像を含む A タグに、onMouseOver, onMouseOut を追加しなければならない。しかも、function の引数に入れ替えを行う画像の name（あるいは id）属性の値を指定しなければならない。
• 古いブラウザでも動作しやすい。

• 入れ替えを行いたい画像の class 属性に同じ値 ROLLOVER を指定する（同じ値なので、ホームページ作成ツール上では画像を複数選択して、一気に指定できる可能性がある）。
• DOM をサポートしていない古いブラウザでは動作しない。

/***************************************************

    Common Function

 ***************************************************/
var $ = function(id) {
  return document.getElementById(id);
};

var addEvent = function(obj, ev, handler) {
  if (obj.addEventListener)
    obj.addEventListener(ev, handler, false);
  else if (obj.attachEvent)
    obj.attachEvent('on' + ev, handler);
  else /* Caution! Override */
    obj['on' + ev] = handler;
};

/***************************************************

    Basic Rollover Object

 ***************************************************/
var swapImage = function(obj) {
  if (obj.tagName != 'IMG') return;
  var reg1 = /\.(gif|jpg|png)$/;
  var reg2 = /\-over\.(gif|jpg|png)$/;
  var src = obj.src;
  if (reg2.test(src))
    obj.src = src.replace(reg2, '.$1');
  else
    obj.src = src.replace(reg1, '-over.$1');
};

var doRollover = function(e) {
  var obj = e.srcElement || e.target;
  if (obj != null) swapImage(obj);
};

addEvent(window, 'load', function() {
  for (var i = 0; i < document.images.length; i++) {
    var obj = document.images[i];
    if (!/\bROLLOVER\b/.test(obj.className)) continue;
    addEvent(obj, 'mouseover', doRollover);
    addEvent(obj, 'mouseout', doRollover);
  }
});