problema con:css sprite - map area - javascript onmouseover

[poscrittum]

Ciao a tutti, sto implementando una mappa dell'Italia con la selezione delle regioni tramite aree e l'evidenziazione della regione relativa al passaggio del mouse, sto usando il metodo degli sprite(per chi non lo conosce http://www.smashingmagazine.com/2009...and-tutorials/), l'ho già usato per cose semplici ma questa volta non funge...

ecco il codice html

<div style="margin-left:1px; padding-top:5px; background-color:#F4F4F4">
  <div style="width:245px; height:291px; margin-left:6px; margin-top:4px; background-image:url('./images/italia.png')">
    <div id="map_regioni"></div>
  </div>
  <div style="width:258px; height:300px; position:relative; top:-298px; left:0px;">
    
    <map name="Map">
      <area shape="poly" coords="175,146,158,127,145,136,149,144,145,147,154,154,161,154,169,149" href="http://miosito.it/regione_1/elenco.htm" alt="Abruzzo" onmouseover="changeMap('1','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="198,202,207,205,219,194,215,188,211,187,203,180,196,176,192,182,197,192" href="http://miosito.it/regione_2/elenco.htm" alt="Basilicata" onmouseover="changeMap('2','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="203,262,198,261,200,254,202,248,205,244,207,231,204,218,201,207,210,209,217,217,224,223,223,233,216,234,214,243,211,252" href="http://miosito.it/regione_3/elenco.htm" alt="Calabria" onmouseover="changeMap('3','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="195,202,186,199,178,186,166,182,157,172,168,165,181,168,188,177" href="http://miosito.it/regione_4/elenco.htm" alt="Campania" onmouseover="changeMap('4','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="129,92,121,68,88,67,67,62,64,74,66,79,75,79,86,84,95,86,105,86,114,88,119,98" href="http://miosito.it/regione_5/elenco.htm" alt="Emilia-Romagna" onmouseover="changeMap('5','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="141,39,132,39,128,36,131,32,128,27,136,21,145,22,149,31,150,42" href="http://miosito.it/regione_6/elenco.htm" alt="Friuli-Venezia Giulia" onmouseover="changeMap('6','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="158,157,153,170,146,167,142,169,138,163,132,163,110,137,120,133,133,140,140,137,142,141,138,147,149,157" href="http://miosito.it/regione_7/elenco.htm" alt="Lazio" onmouseover="changeMap('7','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="24,96,35,89,41,80,55,76,63,79,71,88,60,83,49,79,42,89" href="http://miosito.it/regione_8/elenco.htm" alt="Liguria" onmouseover="changeMap('8','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="60,70,56,62,49,61,54,53,49,41,56,40,66,29,73,28,80,31,80,22,87,25,86,41,87,52,100,64,81,61,70,59,64,59,61,63" href="http://miosito.it/regione_9/elenco.htm" alt="Lombardia" onmouseover="changeMap('9','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="156,121,149,127,140,119,137,109,127,103,127,96,133,99,138,99,147,106,154,113" href="http://miosito.it/regione_10/elenco.htm" alt="Marche" onmouseover="changeMap('10','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="163,161,167,153,174,157,178,150,183,155,175,165" href="http://miosito.it/regione_11/elenco.htm" alt="Molise" onmouseover="changeMap('11','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="31,87,16,86,15,75,15,71,13,68,9,61,19,54,34,47,37,34,42,27,46,34,48,52,42,55,48,66,54,68,38,78" href="http://miosito.it/regione_12/elenco.htm" alt="Piemonte" onmouseover="changeMap('12','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="250,210,253,201,246,192,232,182,214,172,202,167,198,162,207,152,187,152,184,166,199,173,209,178,224,189,240,196" href="http://miosito.it/regione_13/elenco.htm" alt="Puglia" onmouseover="changeMap('13','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="54,234,43,227,47,216,46,198,40,181,46,184,60,173,67,183,71,192,65,197,68,205,65,218,68,225,63,225,60,225" href="http://miosito.it/regione_14/elenco.htm" alt="Sardegna" onmouseover="changeMap('14','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="182,299,185,288,181,278,186,268,192,255,181,260,178,259,166,262,157,263,148,262,144,258,137,262,131,263,132,273,143,277,156,286,168,286" href="http://miosito.it/regione_15/elenco.htm" alt="Sicilia" onmouseover="changeMap('15','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="107,137,90,116,73,83,95,91,108,91,119,104" href="http://miosito.it/regione_16/elenco.htm" alt="Toscana" onmouseover="changeMap('16','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="100,41,89,33,91,24,89,13,99,15,109,8,118,10,123,18,113,20,114,33" href="http://miosito.it/regione_17/elenco.htm" alt="Trentino-Alto Adige" onmouseover="changeMap('17','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="131,136,121,128,121,116,127,113,125,106,134,113,138,123,140,129" href="http://miosito.it/regione_18/elenco.htm" alt="Umbria" onmouseover="changeMap('18','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="15,49,11,41,25,38,31,46" href="http://miosito.it/regione_19/elenco.htm" alt="Valle d'Aosta" onmouseover="changeMap('19','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
      <area shape="poly" coords="123,63,109,65,93,53,93,46,101,46,108,39,116,35,118,25,123,21,130,20,125,30,126,41,137,44,127,51,122,55" href="http://miosito.it/regione_20/elenco.htm" alt="Veneto" onmouseover="changeMap('20','map_regioni');" onmouseout="changeMap('0','map_regioni');" />
    </map>
  </div>
</div>

ed ecco il codice javascript:

function changeMap(n,idMap)
  {
  var mapReg=document.getElementById(idMap);
  var xpos=(-245*n);
  var backpos=xpos+'px 0';
  mapReg.style.backgroudPosition = backpos;
  }

css per map regioni;

#map_regioni
  {
  width:245px;
  height:291px;
  background-image:url('../../../images/regioni.png');
  background-position:0 0;
  background-repeat:repeat-x;
  }

la cosa non funziona.... sigh, se imposto le coordinate manualmente invece è tutto ok... non capisco non capisco non capisco...

[Xinod]

Originariamente inviato da poscrittum
mapReg.style.backgroudPosition = backpos;

[poscrittum]

VVoVe: che idiota...

grazie