Ho fatto una pagina html con una immagine con dei div clickabili che fanno un toggle di rosso-verde (oltre ad altre funzioni) ad ogni click .

es:

codice:
<MAP NAME="Casa"> 

<AREA class="aa" SHAPE="rect" name= "francesco" alt="francesco" coords=" 148, 36, 292, 321" > 
<div id="f" onclick="CambiaStato(this);"><p id="f_man"><p id="f_temp"></div> 

<AREA class="aa" SHAPE="rect" name= "francescoTermo" alt="francescoTermo" coords=" 33, 36, 163, 321" >
<div id="F9" onclick="CambiaStato(this);"><p id="F9_man"><p id="F9_temp"></div> 
</MAP>
[img]PianoPrimo_Base.gif[/img]
parte della funzione CambiaStato:


codice:
function CambiaStato(obj) { 
var cambio = '';  
if (obj.style.backgroundColor == 'rgba(255, 0, 0, 0.4)'){
obj.style.backgroundColor = 'rgba(0, 255, 0, 0.4)'				
obj.style.outline =  "10px dotted rgba(0, 255, 0, 0.4)" 	
......	
}	
else {
obj.style.backgroundColor =  'rgba(255, 0, 0,0.4)' ;
obj.style.outline =  "10px dotted rgba(255, 0, 0,0.4)"
....	
}

......
}
Tutto funziona bene con i browser normali.

Ho provato su Android con quello di default, con Dolphin HD e Skyfire. E qui iniziano i dolori...
Se lascio il tag Area prima del div, mi mostra che ha riconosciuto l'area del div, ma non effettua la chiamata alla funzione.
Bisogna spostare il div prima dell'Area:
codice:
<div id="f" onclick="CambiaStato(this);"><p id="f_man"><p id="f_temp"></div> 
<AREA class="aa" SHAPE="rect" name= "francesco" alt="francesco" coords=" 148, 36, 292, 321" >
Poi, l'If che controlla il colore del background, non lo vede correttamente:
obj.style.backgroundColor dovrebbe essere 'rgba(255, 0, 0, 0.4)', invece mi dà:
obj.style.backgroundColor == 'rgba(255, 0, 0, 0.398438)'

Ma soprattutto, se c'è l'outline nel div
(obj.style.outline = "10px dotted rgba(255, 0, 0,0.4)") ,
ritorna a non eseguire la funzione CambiaStato!

Mentre per esempio su Windows Mobile, Opera funziona bene, però non tiene conto dell'alpha del rgba.

Come faccio a fare sempre eseguire la funzione dell'onclick?