Impostare eventi su Internet Explorer

[Dreamer89]

Salve a tutti! Vorrei impostare degli eventi a degli elementi, con setAttribute tutto fila liscio, ovviamente tranne che per IE6 e IE7...

Devo impostare gli eventi onMouseOver, onMouseOut e onClick, e ho fatto in questo modo:

areas[i].setAttribute('onMouseOver', 'shapeMouseOver(\'' + idName + '\');');
areas[i].setAttribute('onMouseOut', 'shapeMouseOut(\'' + idName + '\');');
areas[i].setAttribute('onClick', 'return shapeMouseClick(\'' + idName + '\');');

Per IE ho provato così:

areas[i].attachEvent('onMouseOver', shapeMouseOver(idName));
areas[i].attachEvent('onMouseOut', shapeMouseOut(idName));
areas[i].attachEvent('onClick', shapeMouseClick(idName));

Ma non funziona!
Cosa mi suggerite di fare?

Grazie mille

[cavicchiandrea]

Prova cosi:
areas[i].onmouseover="function(){shapeMouseOver(idName)}"
areas[i].onmouseout="function(){shapeMouseOut(idName)}"
areas[i].onclick="function(){shapeMouseClick(idName)}"
dovrebbe essere cross-browser

P.S. se idName e una variabile numerica la modificherai cosi "+idName+" se è una stringa '"+idName+"' racchiudila negli apici ''

[Dreamer89]

Originariamente inviato da cavicchiandrea
Prova cosi:
areas[i].onmouseover="function(){shapeMouseOver(idName)}"
areas[i].onmouseout="function(){shapeMouseOut(idName)}"
areas[i].onclick="function(){shapeMouseClick(idName)}"
dovrebbe essere cross-browser

P.S. se idName e una variabile numerica la modificherai cosi "+idName+" se è una stringa '"+idName+"' racchiudila negli apici ''

Purtroppo non funziona

[whisher]

Ciao
guarda se queste ti possono tornare utili

function getTarget(e){
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target){return false;}
    return target;
};
function cancelClick(e){
    if (window.event){
        window.event.cancelBubble = true;
        window.event.returnValue = false;
        return;
    }
    if (e){
        e.stopPropagation();
        e.preventDefault();
    }
};
function addEvent(elm, evType, fn, useCapture){
    if (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
    } else if (elm.attachEvent) {
            elm.attachEvent('on' + evType, fn);
    } else {
            elm['on' + evType] = fn;
    }
}; 

bei tempi in cui mi facevo tutto a manina


Esempio
addEvent(el,'click',func,false);



PS
la + breve e + cross browser è
areas[i].onClick = function(){
shapeMouseOver(idName);
}

ma bisogna vedere cosa e idName
se è l'id dell'elemento puoi fare this.id

[Dreamer89]

Originariamente inviato da whisher
Ciao
guarda se queste ti possono tornare utili

function getTarget(e){
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target){return false;}
    return target;
};
function cancelClick(e){
    if (window.event){
        window.event.cancelBubble = true;
        window.event.returnValue = false;
        return;
    }
    if (e){
        e.stopPropagation();
        e.preventDefault();
    }
};
function addEvent(elm, evType, fn, useCapture){
    if (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
    } else if (elm.attachEvent) {
            elm.attachEvent('on' + evType, fn);
    } else {
            elm['on' + evType] = fn;
    }
}; 

bei tempi in cui mi facevo tutto a manina


Esempio
addEvent(el,'click',func,false);



PS
la + breve e + cross browser è
areas[i].onClick = function(){
shapeMouseOver(idName);
}

ma bisogna vedere cosa e idName
se è l'id dell'elemento puoi fare this.id

Ho già provato anche così:

areas[i].onClick = function(){
shapeMouseOver(idName);
}

ma con scarsi risultati. Ora però sto usando mootools, e grazie alla funzione addEvents pare che non ci siano problemi.

[Dreamer89]

E invece mi sbaglio! Vi spiego il problema più dettagliatamente. 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]images/italymap/italy.png[/img]
	[img]images/italymap/sicilia.png[/img]
	[img]images/italymap/sardegna.png[/img]
	[img]images/italymap/calabria.png[/img]
	[img]images/italymap/basilicata.png[/img]
	[img]images/italymap/campania.png[/img]
	[img]images/italymap/puglia.png[/img]
	[img]images/italymap/molise.png[/img]
	[img]images/italymap/abruzzo.png[/img]
	[img]images/italymap/lazio.png[/img]
	[img]images/italymap/umbria.png[/img]
	[img]images/italymap/marche.png[/img]
	[img]images/italymap/emiliaromagna.png[/img]
	[img]images/italymap/toscana.png[/img]
	[img]images/italymap/liguria.png[/img]
	[img]images/italymap/piemonte.png[/img]
	[img]images/italymap/valledaosta.png[/img]
	[img]images/italymap/lombardia.png[/img]
	[img]images/italymap/trentinoaltoadige.png[/img]
	[img]images/italymap/veneto.png[/img]
	[img]images/italymap/friuliveneziagiulia.png[/img]
	<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>

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);
			}
		});
    }
}

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