Javascript - IE7 image hover script problem

[TimothyH]

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!.


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

}

}

}

[PeejAvery]

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 (http://peejstudio.com/blog.php?id=4).

[TimothyH]

Thanks!