[Javascript] Problema nell'aggiunta di eventi ad elementi

[UnknownSoldier]

Salve a tutti. Allora, in pratica ho una mappa d'italia e devo fare in modo che attraverso javascript, le regioni vengano colorate quando il mouse ci passa sopra:

<div id="italyMap">
<img id="italy" src="images/italymap/italy.png" usemap="#italyMapShapes" alt="" style="border: none;"/>
<img id="siciliaImg" class="italyMapRegion" src="images/italymap/sicilia.png" alt=""/>
<img id="sardegnaImg" class="italyMapRegion" src="images/italymap/sardegna.png" alt=""/>
<img id="calabriaImg" class="italyMapRegion" src="images/italymap/calabria.png" alt=""/>
<img id="basilicataImg" class="italyMapRegion" src="images/italymap/basilicata.png" alt=""/>
<img id="campaniaImg" class="italyMapRegion" src="images/italymap/campania.png" alt=""/>
<img id="pugliaImg" class="italyMapRegion" src="images/italymap/puglia.png" alt=""/>
<img id="moliseImg" class="italyMapRegion" src="images/italymap/molise.png" alt=""/>
<img id="abruzzoImg" class="italyMapRegion" src="images/italymap/abruzzo.png" alt=""/>
<img id="lazioImg" class="italyMapRegion" src="images/italymap/lazio.png" alt=""/>
<img id="umbriaImg" class="italyMapRegion" src="images/italymap/umbria.png" alt=""/>
<img id="marcheImg" class="italyMapRegion" src="images/italymap/marche.png" alt=""/>
<img id="emiliaImg" class="italyMapRegion" src="images/italymap/emiliaromagna.png" alt=""/>
<img id="toscanaImg" class="italyMapRegion" src="images/italymap/toscana.png" alt=""/>
<img id="liguriaImg" class="italyMapRegion" src="images/italymap/liguria.png" alt=""/>
<img id="piemonteImg" class="italyMapRegion" src="images/italymap/piemonte.png" alt=""/>
<img id="aostaImg" class="italyMapRegion" src="images/italymap/valledaosta.png" alt=""/>
<img id="lombardiaImg" class="italyMapRegion" src="images/italymap/lombardia.png" alt=""/>
<img id="trentinoImg" class="italyMapRegion" src="images/italymap/trentinoaltoadige.png" alt=""/>
<img id="venetoImg" class="italyMapRegion" src="images/italymap/veneto.png" alt=""/>
<img id="friuliImg" class="italyMapRegion" src="images/italymap/friuliveneziagiulia.png" alt=""/>
<map id="italyMapShapes" name="italyMapShapes">
<area shape="poly" alt="" title="" coords="231,357,220,408,212,419,190,415,129,372,141,352,228,356" href="sicilia" />
<area shape="poly" alt="" title="" coords="238,291,254,293,265,284,282,313,284,333,262,354,245,373,231,372,233,356,239,341,238,342,238,342" href="calabria" />
<area shape="poly" alt="" title="" coords="24,223,47,220,59,227,68,252,51,309,29,314,10,305,16,227,16,227" href="sardegna" />
<area shape="poly" alt="" title="" coords="235,248,242,245,257,262,268,263,272,277,251,291,235,286,240,279,225,259,234,248" href="basilicata" />
<area shape="poly" alt="" title="" coords="182,241,183,258,226,290,238,279,224,258,233,246,217,229,207,234,195,227,186,234" href="campania" />
<area shape="poly" alt="" title="" coords="225,213,218,228,234,245,245,244,259,261,268,260,273,275,281,275,313,301,318,290,317,273,244,228,256,219,253,210,223,210,238,213" href="puglia" />
<area shape="poly" alt="" title="" coords="215,205,222,212,216,226,188,225,195,217,197,213,206,216,207,214" href="molise" />
<area shape="poly" alt="" title="" coords="145,141,163,148,172,177,151,190,131,171,133,171" href="umbria" />
<area shape="poly" alt="" title="" coords="193,171,172,181,171,194,174,198,164,205,189,220,197,211,204,214,214,205,193,175" href="abruzzo" />
<area shape="poly" alt="" title="" coords="117,186,125,184,131,172,150,191,153,191,166,183,171,198,161,205,187,220,187,231,179,241,159,239,151,230" href="lazio" />
<area shape="poly" alt="" title="" coords="153,126,160,133,164,127,183,142,192,170,174,178,163,146,146,140,151,138,149,133,144,133,147,131" href="marche" />
<area shape="poly" alt="" title="" coords="79,100,87,97,104,113,120,118,127,112,135,118,131,124,135,131,146,136,124,182,114,186,103,185,83,166,88,112,88,112" href="toscana" />
<area shape="poly" alt="" title="" coords="79,72,131,87,146,86,158,92,163,127,159,130,151,123,144,131,139,131,132,125,136,118,126,110,120,117,105,112,87,95,79,99,73,93,70,87,72,87" href="emilia" />
<area shape="poly" alt="" title="" coords="18,116,32,113,55,94,86,116,76,98,68,90,61,85,53,92,52,88,43,89,32,99,22,102,23,102" href="liguria" />
<area shape="poly" alt="" title="" coords="17,29,38,30,39,45,17,46,11,32" href="aosta" />
<area shape="poly" alt="" title="" coords="57,15,61,31,55,41,58,48,63,58,52,58,54,72,61,73,67,84,66,86,60,81,55,88,52,85,37,90,32,97,20,100,2,90,1,56,18,48,40,47,41,32,41,32" href="piemonte" />
<area shape="poly" alt="" title="" coords="162,2,164,23,156,19,146,31,150,38,141,45,132,46,123,54,116,48,109,48,119,22,109,18,115,7" href="trentino" />
<area shape="poly" alt="" title="" coords="180,64,175,53,165,56,160,45,160,35,173,23,164,24,157,22,148,31,151,35,153,40,142,47,131,48,124,56,120,56,115,53,112,62,119,72,136,85,149,83,159,90,161,74,161,74" href="veneto" />
<area shape="poly" alt="" title="" coords="81,15,105,15,114,25,108,48,110,52,114,49,114,52,109,64,133,85,80,70,69,80,63,69,56,69,55,62,64,59,63,49,58,40,65,29,64,31" href="lombardia" />
<area shape="poly" alt="" title="" coords="198,29,202,67,182,62,177,50,167,53,162,45,162,36,177,22,177,22" href="friuli" />
</map>
</div><!-- #italyMap -->


E con javascript aggiungo gli eventi agli elementi <area>
window.onload = function()
{
var areas = document.getElementsByTagName('area');

for (var i = 0; i < areas.length; i++)
{
var italy = document.getElementById('italy');
italy.style.opacity = opacity;
italy.style.filter = 'alpha(opacity=' + (opacity*100) + ')';

var idName = areas[i].getAttribute('href') + 'Img';

$(areas[i]).addEvents({
'mouseover': function(){
shapeMouseOver(idName);
},
'mouseout': function(){
shapeMouseOut(idName);
},
'click': function(){
return shapeMouseClick(idName);
}
});
}
}

(Ho usato la libreria mootools per la funzione addEvents). Però con questo codice, su qualsiasi regione mi vado a spostare col mouse, viene sempre selezionata la regione Friuli Venezia Giulia (che è l'ultima della lista).
Non capisco il perchè... avete qualche idea? Sto impazzendo :(

[MEMon]

Perchè idName è "friuli", guardati le closure in javascript.

Prova così:


window.onload = function()
{
var areas = document.getElementsByTagName('area');
var italy = document.getElementById('italy');
italy.style.opacity = opacity;
italy.style.filter = 'alpha(opacity=' + (opacity*100) + ')';
for (var i = 0; i < areas.length; i++)
{
var idName = areas[i].getAttribute('href') + 'Img';
(function(area, id){
$(area).addEvents({
'mouseover': function(){
shapeMouseOver(id);
},
'mouseout': function(){
shapeMouseOut(id);
},
'click': function(){
return shapeMouseClick(id);
}
});
})(areas[i], idName);
}
}


Ad occhio dovrebbe andare.

Come mai tenevi questo dentro al ciclo?

var italy = document.getElementById('italy');
italy.style.opacity = opacity;
italy.style.filter = 'alpha(opacity=' + (opacity*100) + ')';