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.

[TimothyH]

Thanks!