JS: double boucle et compatibilité...

Bonjour,

A force de travail j'ai élaborer (en piquant des bouts par ci par la) un script permettant d'avoir de joli couleurs sur les carrés de listes par exemples... et j'étais bien content :)

Cependant, je viens de m'atteler à mettre tout ca dans un thème wordpress (je faisais ca sous un page html avant... sans pb) et donc j'ai séparer le code dans des pages différentes en les apellant (CSS/JS).
Mais voilà, ca ne fonctionne plus que sous IE (pour une fois!)
Je ne comprend pas pourquoi... du tout. Le code n'a pas changé si ce n'est d'emplacement. Et cela fonctionne toujours pour IE (7).

Aussi, j'ai essayer d'imbriquer deux boucles dans mon code car je pense qu'il est possible de le raccourcir et l'améliorer avec une boucle j, cependant il me manque qqch pour qu'il fonctionne... et la encore je ne sais pas quoi. Aller, assez parlé, je vous met les bouts de code:

Voilà mon code JS

function genHex(){
colors = new Array(7)
colors[0]="4"
colors[1]="5"
colors[2]="6"
colors[3]="7"
colors[4]="8"
colors[5]="9"
colors[6]="a"
colors[7]="b"

color=color2=color3=color4=color6=color7=color5=color8="ff"
digit = new Array(5)
digit2 = new Array(5)
digit3 = new Array(5)
digit4 = new Array(5)
digit5 = new Array(5)
digit6 = new Array(5)
digit7 = new Array(5)
digit8 = new Array(5)

for (i=0;i<2;i++){
digit[i]=colors[Math.round(Math.random()*7)]
digit2[i]=colors[Math.round(Math.random()*7)]
digit3[i]=colors[Math.round(Math.random()*7)]
digit4[i]=colors[Math.round(Math.random()*7)]
digit5[i]=colors[Math.round(Math.random()*7)]
digit6[i]=colors[Math.round(Math.random()*7)]
digit7[i]=colors[Math.round(Math.random()*7)]
digit8[i]=colors[Math.round(Math.random()*7)]
color = color+digit[i]
color2 = color2+(digit2[i])
color3 = color3+(digit3[i])
color4 = color4+(digit4[i])
color5 = color5+digit5[i]
color6 = color6+(digit6[i])
color7 = color7+(digit7[i])
color8 = color8+(digit8[i])
}
color=color+'00';
color2=color2+'00';
color3=color3+'00';
color4=color4+'00';
color5=color5+'00';
color6=color6+'00';
color7=color7+'00';
color8=color8+'00';
document.getElementById('menu_carre').style.backgroundColor=color;
document.getElementById('menu_carre2').style.backgroundColor=color2;
document.getElementById('menu_carre3').style.backgroundColor=color3;
document.getElementById('menu_carre4').style.backgroundColor=color4;
document.getElementById('menu_carre5').style.backgroundColor=color5;
document.getElementById('menu_carre6').style.backgroundColor=color6;
document.getElementById('menu_carre7').style.backgroundColor=color7;
document.getElementById('menu_carre8').style.backgroundColor=color8
}
function genHexGreen(){
colors = new Array(7)
colors[0]="4"
colors[1]="5"
colors[2]="6"
colors[3]="7"
colors[4]="8"
colors[5]="9"
colors[6]="a"
colors[7]="b"

color=color2=color3=color4=color6=color7=color5=color8=""
digit = new Array(5)
digit2 = new Array(5)
digit3 = new Array(5)
digit4 = new Array(5)
digit5 = new Array(5)
digit6 = new Array(5)
digit7 = new Array(5)
digit8 = new Array(5)

for (i=0;i<2;i++){
digit[i]=colors[Math.round(Math.random()*7)]
digit2[i]=colors[Math.round(Math.random()*7)]
digit3[i]=colors[Math.round(Math.random()*7)]
digit4[i]=colors[Math.round(Math.random()*7)]
digit5[i]=colors[Math.round(Math.random()*7)]
digit6[i]=colors[Math.round(Math.random()*7)]
digit7[i]=colors[Math.round(Math.random()*7)]
digit8[i]=colors[Math.round(Math.random()*7)]
color = color+digit[i]
color2 = color2+(digit2[i])
color3 = color3+(digit3[i])
color4 = color4+(digit4[i])
color5 = color5+digit5[i]
color6 = color6+(digit6[i])
color7 = color7+(digit7[i])
color8 = color8+(digit8[i])
}
color=color+'ff00';
color2=color2+'ff00';
color3=color3+'ff00';
color4=color4+'ff00';
color5=color5+'ff00';
color6=color6+'ff00';
color7=color7+'ff00';
color8=color8+'ff00';
document.getElementById('menu_carreg').style.backgroundColor=color;
document.getElementById('menu_carreg2').style.backgroundColor=color2;
document.getElementById('menu_carreg3').style.backgroundColor=color3;
document.getElementById('menu_carreg4').style.backgroundColor=color4;
document.getElementById('menu_carreg5').style.backgroundColor=color5;
document.getElementById('menu_carreg6').style.backgroundColor=color6;
document.getElementById('menu_carreg7').style.backgroundColor=color7;
document.getElementById('menu_carreg8').style.backgroundColor=color8
}
function eraseHex(){
grey='#eee';
green='#99ff00';
orange='#ff9900';
document.getElementById('menu_carre').style.backgroundColor=green;
document.getElementById('menu_carre2').style.backgroundColor=grey;
document.getElementById('menu_carre3').style.backgroundColor=grey;
document.getElementById('menu_carre4').style.backgroundColor=grey;
document.getElementById('menu_carre5').style.backgroundColor=grey;
document.getElementById('menu_carre6').style.backgroundColor=grey;
document.getElementById('menu_carre7').style.backgroundColor=grey;
document.getElementById('menu_carre8').style.backgroundColor=grey;
document.getElementById('menu_carreg').style.backgroundColor=orange;
document.getElementById('menu_carreg2').style.backgroundColor=grey;
document.getElementById('menu_carreg3').style.backgroundColor=grey;
document.getElementById('menu_carreg4').style.backgroundColor=grey;
document.getElementById('carre').style.backgroundColor=orange
}
function transHex(){
black='#000';
grey='#aaa';
green='#99ff00';
document.getElementById('carre').style.backgroundColor=black;
}
function carre_black(){
black='#000';
document.getElementById('carre').style.backgroundColor=black;
}
function carre_green(){
green='#99ff00';
document.getElementById('carre').style.backgroundColor=green;
}
function carre_orange(){
orange='#ff9900';
document.getElementById('carre').style.backgroundColor=orange;
}

Voilà la ou je m'en sers dans ma page:

<div id="menu">
	<div id="menu_box" onmouseout="eraseHex();" onmouseover="transHex();">
		<div id="menu_carre"></div><a href="javascript:void(0);" onmouseover="genHex();" onclick="">Books</a>
		<br><div id="menu_carre2"></div><a href="javascript:void(0);" onmouseover="genHex();" onclick="">Photography</a>
		<br><div id="menu_carre3"></div><a href="javascript:void(0);" onmouseover="genHex();" onclick="">Music</a>
		<br><div id="menu_carre4"></div><a href="javascript:void(0);" onmouseover="genHex();" onclick="">Cinema</a>
		<br><div id="menu_carre5"></div><a href="javascript:void(0);" onmouseover="genHex();" onclick="">Science</a>
		<br><div id="menu_carre6"></div><a href="javascript:void(0);" onmouseover="genHex();" onclick="">Politics</a>
		<br><div id="menu_carre7"></div><a href="javascript:void(0);" onmouseover="genHex();" onclick="">Human</a>
		<br><div id="menu_carre8"></div><a href="javascript:void(0);" onmouseover="genHex();" onclick="">Philosophy</a>
	</div>
</div>

Et voilà le CSS des divs concernées:

#menu_box {position : absolute; /* IMPERATIF */ left : 0px;top : 260px;color : #000;font-family : Trebuchet MS, Lucida Grande, Arial, Helvetica, Sans-serif;font-size:12px;line-height:15px;text-align:left;padding: 0px 20px;background-color:#fff;width:160px;z-index : 1000;}
#menu_box a {text-decoration:none; color:#ccc; padding: 0px 5px;}
#menu_box a:hover {font-weight:bold; color:#000;}

#menu_carre {float:left; background:#99ff00; width:10px; height:10px; margin: 3px 5px 0px 0px;}
#menu_carre2, #menu_carre3, #menu_carre4, #menu_carre5, #menu_carre6, #menu_carre7, #menu_carre8 {float:left; background:#eee; width:10px; height:10px; margin: 3px 5px 0px 0px;}

Merci beaucoup!!
Ludo