Consigli mappa d'Italia interattiva

[Gigitsu]

Ciao a tutti!
Sono qui per chiedervi un consiglio , per un sito devo realizzare una mappa interattiva dell'Italia.

Ho fatto alcune prove e a questo indirizzo ho caricato due esempi di mappa realizzate seguendo due diversi approcci:
La mappa di sinistra è un immagina SVG realizzata con RaphaelJs mentre la mappa di destra è una imagemap. Entrambe le mappe sono state realizzate partendo da un file vettoriale convertito in svg da cui ho poi estratto le coordinate delle varie regioni.
Secondo voi qual'è l'approccio migliore, il più compatibile con i vari browser?

Io ho potuto testare le mappe con:
-Chrome 5, Safari 5, Firefox 3.6.6 nessun problema rilevato
-Opera 10.6 nella mappa SVG non viene intercettato l'evento MouseOut per cui la regione resta evidenziata con i contorni arancioni
-Internet Explorer 7 e 8 per l'SVG stesso problema di Opera mentre per la imagemap il passaggio del mouse su una regione causa la comparsa di linee per tutta la mappa.

Di tutti i browser elencati ad eccezione di IE sono state testate le versioni per Windwos e per Mac OS

Inoltre ho notato che la mappa realizzata tramite imagemap risulta sfasata di circa un pixel eppure l'immagine png e le coordinate sono state ricavate dallo stesso svg senza alcune modifiche e non mi spiego come mai ci sia questo sfasamento...

Ciao a tutti!

[furbostandby]

Di jquery non me ne intendo, ma pare che il problema che ha IE nella mappa di destra sia causato da un qualche errore nell'interpretazione delle coordinate (ripeto, non ti so spiegare altro ma magari prova a cercare il problema in quella direzione).

Per quanto riguardalo sfasamento di cui parlavi, a me quell'effetto, benchè imprevisto, piace, perchè da un tocco di tridimensionalità, i bordi arancioni sembrano quasi uscire dalla pagina.

Ho notato anche che con IE non succede niente cliccando sulle regioni della prima mappa.

Per quale scegliere vedi tu: ognuna delle due ha pregi e difetti. Dipende da che uso vuoi farne...

Ciao

[Gigitsu]

A dire il vero lo sfasamento per l'effetto tridimensionale che crea piace anche a me ma volevo capire il perché dello sfasamento

Per quanto riguarda l'IE evidentemente non prende bene gli evento onMouseOut e onClick, e a quanto pare neanche Opera lancia correttamente quei due eventi, forse usano lo stesso motore JavaScript :master: mi devo documentare.

Fino ad ora il sistema con imagemap sembra essere quello meno problematico e viene caricato più velocemente ma personalmente preferisco l'approccio SVG perché mi sembra più flessibile, sono molto deciso vero?

Vedrò se posso risolvere gli errori che ho riscontrato fino ad ora e poi scelgo il metodo da utilizzare.

P.S.
Qualcuno può testare le mappe su Internet Explorer 6? Ho installato il MultipleIEs ma da oggi ha smesso di funzionare (che )

[Vincent.Zeno]

Originariamente inviato da Gigitsu
Qualcuno può testare le mappe su Internet Explorer 6?

carta a sx:
le regioni si illuminano lentamente e rimangono evidenziate
nessun evento onClick

carta a dx:
grigio di fondo per il trasparente (img png)
le regioni si illuminano velocemente e non rimangono evidenziate
evento onClick regolare
confermo spostamento di 1 px verso l'alto

[Gigitsu]

Grazie Vincent! Il problema del canale alpha su IE6 è facile da risolvere perciò credo che userò l'image map, grazie a tutti!