AOK's JavaScript Sample
動作確認: ○IE6SP2(WinXP) ○Firefox3(WinXP) ○Opera9(WinXP)
Last Update: Jul.30,2009

リンクが張られている画像の上にマウスカーソルを置いたり、外したりしたときに、画像の入れ替え(ロールオーバー)を行うスクリプトは、ホームページの制作においてよく使われているもののひとつです。最近のホームページ作成ツールでは、このスクリプトを簡単に使えるようですが、いちいち指定するのも結構面倒ですし、ソースを眺めると同じようなコードが数多く挿入されていて、なんだかすっきりしない感じです。そこで、もう少しクールな方法を考えてみました。なお、使用する画像のファイル名は、元の画像が xxx.gif であれば、onMouseOver で入れ替える画像に xxx-over.gif という名前を付けるという規則があるものとします。

■ 従来の方法

  • 各画像の 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);
  }
});

戻る Copyright (c) 2006, 2008, 2009 AOK. All Rights Reserved.