画像のロールオーバー処理(jQuery未使用、IE6 7 8 9 FF Chrome動作)
画像のロールオーバー処理(jQuery使用、IE6 7 8 9 FF Chrome動作)
オブジェクトで作るの忘れてた。
また今度
ソースコード的な

window.onload = function()
{
 // ロールオーバーさせる要素の取得
 var imgOvers = _getElementByClassName('imgover','img');
 var imgOverslength = imgOvers.length;

 for(i=(imgOverslength-1);i>=0;i--)
 {
  // addEventListenerはIEでは使えない。
  // IEはattachEventが有効
  if(imgOvers[i].attachEvent)
  {
   imgOvers[i].attachEvent('onmouseover',_imgOn);
   imgOvers[i].attachEvent('onmouseout',_imgOut);
  }
  else
  {
   imgOvers[i].addEventListener('mouseover',_imgOn);
   imgOvers[i].addEventListener('mouseout',_imgOut);
  }
 }

 // マウスオーバー時の動作
 function _imgOn(e)
 {
  thisElem = _getThis(e);
  thisElem.src = thisElem.src.replace(/(\.gif|\.jpg|\.png)/,'_on$1');
 }

 // マウスアウト時の動作
 function _imgOut(e)
 {
  thisElem = _getThis(e);
  thisElem.src = thisElem.src.replace(/(_on\.)/g,'\.');
 }


 /*
  * _getElementByClassName
  * 指定クラス名とタグ名を使ってほしい要素を取得する。
  *
  * @parm
  *  cName String クラス名
  *  tName String タブ名
  *
  * @return
  *  classNameArr Array 一致したクラス名たち
  *
  */
 function _getElementByClassName(cName,tName)
 {
  //タグ名で要素を取得
  var tags    = document.getElementsByTagName(tName);
  var tagsLen = tags.length;
  var classNameArr = new Array();

  // 取得した要素をループで回す。
  // このパターンのループはカウントダウンのほうが早い
  for(i=(tagsLen-1);i>=0;i--)
  {
   // 指定したクラスがあれば配列に格納する。
   if(tags[i].className == cName)
   {
    classNameArr.push(tags[i]);
   }
  }

  return classNameArr;
 }

 /*
  * _getThis
  * thisの取得
  *
  * @parm
  *  eventData Object イベントオブジェクト
  *
  * @return
  *  自分自身のオブジェクト
  *
  */
 function _getThis(eventData)
 {
  var e = (window.event)? window.event : arguments.callee.caller.arguments[0] ;
  var self = e.target || e.srcElement;

  return self;
 }

}

© Company 2012