CSS의 Class를 이용한 RollOver 기능 구현

참조 : http://www.dustindiaz.com/getelementsbyclass/

getElementsByClass 함수를 가져 왔다.

도시락에서 Class를 이용해서 간단하게 구현한 RollOver 기능을 구현해 달라는 디자이너의 요구에 이것저것 찾아다 만들었다.

얼마나 잘 만들었는지는 모르겠지만, 어쨋든 도시락처럼 구현은 되었다.

--------------------------------------------------------------------------------------

〈img src=http://image.dosirak.com/Images/Commons/ico_put_off.gif class=BasicOver>
〈img src=http://image.dosirak.com/Images/Commons/ico_put_off.gif class=BasicOver>
〈img src=http://image.dosirak.com/Images/Commons/ico_put_off.gif class=BasicOver>
〈img src=http://image.dosirak.com/Images/Commons/ico_put_off.gif class=BasicOver>
〈script>
  function getElementsByClass(searchClass,node,tag) {
    var classElements=new Array();
    if(node==null)
      node=document;
    if(tag==null)
      tag='*';
    var els=node.getElementsByTagName(tag);
    var elsLen=els.length;
    var pattern=new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i=0,j=0;i<elsLen;i++){
      if(pattern.test(els[i].className)){
        classElements[j]=els[i];
        j++;
      }
    }
    return classElements;
  }

  var objs=getElementsByClass('BasicOver',null,'img')
  for(i=objs.length;i--;){
    objs[i].onmouseover=new Function("this.src=this.src.replace('_off.','_over.')")
    objs[i].onmouseout=new Function("this.src=this.src.replace('_over.','_off.')")
  }
〈/script>