incongruenze DOM-CSS tramite javascript su browser mobili

[franki10]

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:

<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:

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:

<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?

[fcaldera]

ma invece di cambiare la singola proprietà non puoi fare switch tra classi che hanno già i background corretti?

[franki10]

Intendi per fare un if della classe invece che della singola proprietà?

Sì, penso che posso provare.
Solo che dovrei fare 4 classi: rosso, verde, rossoOutiline, verdeOutline.

E anche devo usare jQuery in un'altra funzione.

Adesso appena ho un attimo, provo.

[franki10]

Allora, ho scritto la versione con le classi, niente da fare.

.verdeManuale { 
background-color: rgb(0, 255, 0);  
opacity: 0.4; 
outline:10px dotted #00ff00; 
}
....

	if ( (obj.className == 'rosso' ) || (obj.className =='rossoManuale')) {								
	
		obj.className = "verdeManuale";
}

......

Ad ogni click si vede che seleziona l'area del tag Area, ma non esegue la funzione del div.

In Opera per Windows mobile la funzione onclick va, ma mi mostra solo gli outline (dove ci sono) e niente background-color in nessun div. Il problema lì è l'opacity: togliendolo funziona tutto.

Mentre nei browser normali va bene tutto.

Sono solo i browser per android che danno questo problema. Che posso fare?

[franki10]

Togliendo i tag Map e area e lasciando solo i div con l'onclick che si sovrappongono all'immagine nello sfondo, funziona.

I div sono con posizionamento assoluto e dimensioni fisse.

E' possibile però adeguare le loro dimensioni e posizionamento a quello dell'immagine di sfondo in automatico?
Perché se cambio solo la dimensione dell'immagine non c'è più corrispondenza.
Attualmente ho così:

#i{ 
position:absolute; 
left:410px; 
top:380px; 
width:220px; 
height:170px; 
}