onMouseOver 60 element

Har 60 st lager i form av rutor.. Vill ha onMouseOver effekt på alla.. när man för musen över ska bakgrunden bli röd och när man för musen ut ska den bli vit igen.
Vill ju slippa skriva onMouseOver för alla lager så jag har gjort ett skript för att läsa in alla lager i en Array samt namnet på lagrerna i en annan.. dock är det något som är fel..
får inga fel meddelanden dock.

varför fungerar det inte,.?
Så här ser koden ut..:

<script language="JavaScript" type="text/javascript">

// init variables
var valid_browser = (document.getElementById)? true:false;
var square_amount = 60;
var squareArr = new Array();
var square_nameArr = new Array();
if (valid_browser) {
	for (var i=0; i<=square_amount; i++) {
		var layer = eval("r_"+i);
		squareArr[i] = document.getElementById(layer);
		square_nameArr[i] = "r_"+i;
	}
}
	
function init() {
	if (valid_browser) {
		for (var i=0; i<=square_amount; i++) {
			squareArr[i].onMouseOver = paint(square_nameArr[i]);
		}
	}
 }

function paint(square) {
	if (valid_browser) {
		if(document.getElementById(square).style.background == "#FFFFFF")
			document.getElementById(square).style.background = "#FF0000";
		} else if (document.getElementById(square).style.background == "#FF0000")
			document.getElementById(square).style.background = "#FFFFFF";
		}
	}
}

document.onLoad = init();

</script>

Och så här ser lagrerna ut..
Klistrar in 4 st så ni förstår hur det är tänkt att fungera.

<div id="r_1" style="position:absolute; left:0px; top:0px; width:10px; height:10px; background:#FFFFFF; border-style:solid; border-width:1px; border-color:#DDDDDD; padding:0px;">
  </div>

  <div id="r_2" style="position:absolute; left:12px; top:0px; width:10px; height:10px; background:#FFFFFF; border-style:solid; border-width:1px; border-color:#DDDDDD; padding:0px;">
  </div>

  <div id="r_3" style="position:absolute; left:24px; top:0px; width:10px; height:10px; background:#FFFFFF; border-style:solid; border-width:1px; border-color:#DDDDDD; padding:0px;">
  </div>

  <div id="r_4" style="position:absolute; left:36px; top:0px; width:10px; height:10px; background:#FFFFFF; border-style:solid; border-width:1px; border-color:#DDDDDD; padding:0px;">
  </div>

sedan fortsätter det till 60st med id r_5, r_6, r_7 etc..

Testa denna kod:

function init(){
	if(!document.getElementsByTagName)
		return;
	var elms=(document.all)?document.all:document.getElementsByTagName("*"),i=elms.length;
	while(i-->0){
		switch(true){
		case elms[i].id.indexOf("r_")!=-1:
			if(window.addEventListener){
				elms[i].addEventListener("mouseover",function(){this.style.background="#ee0000"},false);
				elms[i].addEventListener("mouseout",function(){this.style.background="#fff"},false);
			}
			else if(window.attachEvent){
				elms[i].attachEvent("onmouseover",function(){window.event.srcElement.style.background="#ee0000"});
				elms[i].attachEvent("onmouseout",function(){window.event.srcElement.style.background="#fff"});
			}
			break;
		}
	}
};

window.onload=init;

:)