Image map qui rame sous Opera et qui est fluide sous Firefox

Bonjour, j'utilise une Image Map avec 225 champs. (15*15)
Sous Firefox, aucun problème, c'est tres fluide.
Sous Opera par contre, c'est tres tres lent, le curseur de la souris a du mal à bouger.
Je n'ai pas testé sous Internet Explorer car je suis sous Linux.
Voici le code de mes fichiers :

<div id="map">
		<?
		$i=1;
		while($i<226) { echo "<li  id=\"l".$i."\"><a href=\"\"><span>".$i."</span></a></li>\n"; $i++;}
		?>
	</div>

et le fichier CSS:

#map {
  display: block;
  position: relative;
  width: 465px;
  height: 465px;
  margin: 0;
  padding: 0;
  background-color: blue;
   }
#map li {
  
  visibility: hidden;   
  list-style-type: none;
  position: absolute;
  background-color: black;
  border: 1px dotted black;
  font-family: sans-serif;
  font-size: x-small;
  color: red;
  padding: 0;
  line-height: 1.3em;
  overflow: hidden; }
  
#map span { 

  visibility: hidden;
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  padding: 0px; 
  padding-top: 8px;
  font-size: 1.6em;
  }
  
#map:hover li { visibility: visible; }
#map li:hover { background-color: red;}
#map li:hover span {visibility: visible;}

#l1,#l16,#l31,#l46,#l61,#l76,#l91,#l106,#l121,#l136,#l151,#l166,#l181,#l196,#l211 { left:0px; width: 30px;}
#l2,#l17,#l32,#l47,#l62,#l77,#l92,#l107,#l122,#l137,#l152,#l167,#l182,#l197,#l212 { left:31px; width: 30px;}
#l3,#l18,#l33,#l48,#l63,#l78,#l93,#l108,#l123,#l138,#l153,#l168,#l183,#l198,#l213 { left:62px; width: 30px;}
#l4,#l19,#l34,#l49,#l64,#l79,#l94,#l109,#l124,#l139,#l154,#l169,#l184,#l199,#l214 { left:93px; width: 30px;}
#l5,#l20,#l35,#l50,#l65,#l80,#l95,#l110,#l125,#l140,#l155,#l170,#l185,#l200,#l215 { left:124px; width: 30px;}
#l6,#l21,#l36,#l51,#l66,#l81,#l96,#l111,#l126,#l141,#l156,#l171,#l186,#l201,#l216 { left:155px; width: 30px;}
#l7,#l22,#l37,#l52,#l67,#l82,#l97,#l112,#l127,#l142,#l157,#l172,#l187,#l202,#l217 { left:186px; width: 30px;}
#l8,#l23,#l38,#l53,#l68,#l83,#l98,#l113,#l128,#l143,#l158,#l173,#l188,#l203,#l218 { left:217px; width: 30px;}
#l9,#l24,#l39,#l54,#l69,#l84,#l99,#l114,#l129,#l144,#l159,#l174,#l189,#l204,#l219 { left:248px; width: 30px;}
#l10,#l25,#l40,#l55,#l70,#l85,#l100,#l115,#l130,#l145,#l160,#l175,#l190,#l205,#l220 { left:279px; width: 30px;}
#l11,#l26,#l41,#l56,#l71,#l86,#l101,#l116,#l131,#l146,#l161,#l176,#l191,#l206,#l221 { left:310px; width: 30px;}
#l12,#l27,#l42,#l57,#l72,#l87,#l102,#l117,#l132,#l147,#l162,#l177,#l192,#l207,#l222 { left:341px; width: 30px;}
#l13,#l28,#l43,#l58,#l73,#l88,#l103,#l118,#l133,#l148,#l163,#l178,#l193,#l208,#l223 { left:372px; width: 30px;}
#l14,#l29,#l44,#l59,#l74,#l89,#l104,#l119,#l134,#l149,#l164,#l179,#l194,#l209,#l224 { left:403px; width: 30px;}
#l15,#l30,#l45,#l60,#l75,#l90,#l105,#l120,#l135,#l150,#l165,#l180,#l195,#l210,#l225 { left:434px; width: 30px;}

#l1,#l2,#l3,#l4,#l5,#l6,#l7,#l8,#l9,#l10,#l11,#l12,#l13,#l14,#l15 { top:0px; height: 30px;}
#l16,#l17,#l18,#l19,#l20,#l21,#l22,#l23,#l24,#l25,#l26,#l27,#l28,#l29,#l30 { top:31px; height: 30px;}
#l31,#l32,#l33,#l34,#l35,#l36,#l37,#l38,#l39,#l40,#l41,#l42,#l43,#l44,#l45 { top:62px; height: 30px;}
#l46,#l47,#l48,#l49,#l50,#l51,#l52,#l53,#l54,#l55,#l56,#l57,#l58,#l59,#l60 { top:93px; height: 30px;}
#l61,#l62,#l63,#l64,#l65,#l66,#l67,#l68,#l69,#l70,#l71,#l72,#l73,#l74,#l75 { top:124px; height: 30px;}
#l76,#l77,#l78,#l79,#l80,#l81,#l82,#l83,#l84,#l85,#l86,#l87,#l88,#l89,#l90 { top:155px; height: 30px;}
#l91,#l92,#l93,#l94,#l95,#l96,#l97,#l98,#l99,#l100,#l101,#l102,#l103,#l104,#l105 { top:186px; height: 30px;}
#l106,#l107,#l108,#l109,#l110,#l111,#l112,#l113,#l114,#l115,#l116,#l117,#l118,#l119,#l120 { top:217px; height: 30px;}
#l121,#l122,#l123,#l124,#l125,#l126,#l127,#l128,#l129,#l130,#l131,#l132,#l133,#l134,#l135 { top:248px; height: 30px;}
#l136,#l137,#l138,#l139,#l140,#l141,#l142,#l143,#l144,#l145,#l146,#l147,#l148,#l149,#l150 { top:279px; height: 30px;}
#l151,#l152,#l153,#l154,#l155,#l156,#l157,#l158,#l159,#l160,#l161,#l162,#l163,#l164,#l165 { top:310px; height: 30px;}
#l166,#l167,#l168,#l169,#l170,#l171,#l172,#l173,#l174,#l175,#l176,#l177,#l178,#l179,#l180 { top:341px; height: 30px;}
#l181,#l182,#l183,#l184,#l185,#l186,#l187,#l188,#l189,#l190,#l191,#l192,#l193,#l194,#l195 { top:372px; height: 30px;} 
#l196,#l197,#l198,#l199,#l200,#l201,#l202,#l203,#l204,#l205,#l206,#l207,#l208,#l209,#l210 { top:403px; height: 30px;}
#l211,#l212,#l213,#l214,#l215,#l216,#l217,#l218,#l219,#l220,#l221,#l222,#l223,#l224,#l225 { top:434px; height: 30px;}

Vous pouvez tester le code sur http://alpha08.free.fr

D'avance merci.

Sous IE6, je n'ai qu'un carré bleu et il ne se passe rien au survole des champs.

Bonsoir à toi,

En ouvrant ta page d'exemple dans le navigateur, j'ai remarqué que tu avais une erreur qui peut être à l'origine d'un certain nombre de problème.
Tu utilises des éléments de liste <li>...</li> sans déclarer de liste <ul>...</ul>.

Je pense que la correction de cette erreur corrigera au moins le problème rencontré sous IE.

Merci pour le <ul></ul> je sais pas pourquoi je l'ai viré...
peut être que ça va marcher sur IE en effet.
Enfait j'aimerais que ça marche sous Opera car ce site est destiné à tourner sur un Opera embarqué.

Merci pour votre attention.