Javascript - IE7 image hover script problem

Hi Everyone,

Iv'e written a simple script that applies a Image hover per class.
In FireFox it works fine but it doesn't in Internet Explorer 7.
I can't figure out why :(.
Could you guys please take a look, thanks!.

Code:

---

function applyHoverByClass(cn){
 var elmnts = document.getElementsByClassName(cn); // gets all elements by className
 var x = null; // reset x
       
                  for(x=0;x<elmnts.length;x++){ // run trough all elements with same className

                var iDir = "graphics/"+elmnts[x].className+".png"; // sets idle image directory for mouseover
                var hDir = "graphics/"+elmnts[x].className+"H.png";// sets hover image directory for mouseout
               
                if(elmnts[x].tagName=="IMG"){ // checks if class is an image element
                //fires if image class
               
                elmnts[x].onmouseover = function() {this.src=hDir;} // apply mouseover function to current element
                elmnts[x].onmouseout = function() {this.src=iDir;} // apply mouseout function to current element
               
                }else {
                // fires if not an image class
                                               
                elmnts[x].onmouseover = function() {this.style.backgroundImage="url(\""+hDir+"\")";} // apply mouseover function to current element
                elmnts[x].onmouseout = function() {this.style.backgroundImage="url(\""+iDir+"\")";} // apply mouseout function to current element
               
                }
               
                }
               
}

---

The method getElementsByClassName() is only natively supported by Firefox 3, hence it will not work in lower versions nor Internet Explorer. There are many other alternatives.

Thanks!