archimede70 ha scritto:Per altre mappe basta usare la stessa img class, Giusto?
Esatto!
archimede70 ha scritto:Vorrei solo cambiare il colore del bordo.
Dunque, a questo punto devi sapere che con questo script, per personalizzare gli effetti da ottenere al passaggio del mouse sopra una porzione dell'immagine, devi definire delle classi per i tag <area> su cui vuoi intervenire, strutturate in questo modo:
Commenta:<area class="{istruzioni-separate-da-una-virgola}" shape="poly" coords="1,2,3,4" title="Titolo" href="#">...</area>
Tra parentesi graffe, puoi inserire
inline (meglio non usare un .css esterno) una o più di queste istruzioni (te le ho messe tutte, traducendo dall'inglese le spiegazioni, cosicché tu possa sperimentare autonomamente):
Commenta:fill (valore booleano. Impostazione predefinita: true)
Per riempire o meno la porzione d'immagine.
fillColor (codice esadecimale del colore. Impostazione predefinita: '000000')
Il colore di riempimento della porzioni d'immagine.
fillOpacity (numero. Impostazione predefinita: 0.2)
L'opacità del riempimento (0 = completamente trasparente, 1 = completamente opaco).
stroke (valore booleano. Impostazione predefinita: true)
Per impostare o meno un bordo alla porzione d'immagine.
strokeColor (codice esadecimale del colore. Impostazione predefinita: 'ff0000')
Il colore del bordo.
strokeOpacity (numero. Impostazione predefinita: 1)
L'opacità del bordo (0 = completamente trasparente, 1 = completamente opaco)
strokeWidth (numero. Impostazione predefinita: 1)
Lo spessore del bordo.
fade (valore booleano. Impostazione predefinita: true)
Per impostare o meno l'effetto dissolvenza sulla porzione d'immagine al passaggio del mouse.
alwaysOn (valore booleano. Impostazione predefinita: false)
Per mostrare la porzione d'immagine sempre illuminata (anche senza passarci sopra il mouse).
neverOn (valore booleano. Impostazione predefinita: false)
Per non mostrare mai la porzione d'immagine illuminata (neanche al passaggio del mouse).
groupBy (stringa alfanumerica. Impostazione predefinita: false)
Il nome di un attributo attraverso il quale è possibile raggruppare alcune aree.
Se è presente questa stringa, tutte le aree della mappa che possiedono lo stesso valore di attributo si illumineranno simultaneamente al passaggio del mouse.
Per fare un esempio pratico, poniamo di voler ottenere un effetto di riempimento in colore verde, con un bordo azzurro molto spesso. Scriveremo:
Code:<area class="{fillColor:'00ff00',strokeColor:'0099ff',strokeWidth:4}" shape="poly" coords="1,2,3,4" title="Titolo" href="#">...</area>
Nel tuo caso, se vuoi solo rimuovere l'effetto di riempimento e cambiare il colore del bordo, ti basterà scrivere:
Code:<area class="{fill:false,strokeColor:'0099ff'}" shape="poly" coords="1,2,3,4" title="Titolo" href="#">...</area>
Credo di averti detto tutto... Ah, no, aspetta!
● Se non ti è chiaro il concetto di "valore booleano" (che sono solo due:
true e
false, cioè 'acceso' e 'spento', come un interruttore) puoi sempre dare un'occhiata qui -->
http://it.wikipedia.org/wiki/Operatore_booleano#Operatori_booleani● Se necessiti di un "color picker", che ti permette di ottenere il numero esadecimale corrispondente a un dato colore, puoi consultare questa pagina (sempre sul sito delle W3 Schools) -->
HTML Color PickerBuon divertimento e alla prossima!
