Css Mappa d’Italia – esempio css 8
Questa mappa d’Italia realizzata in css è una versione aggiornata postata un anno fa sul mio sito per renderla compatibile con Internet Explorer 6.
Questa mappa css d’Italia usa un immagine per ogni provincia posizionate in modo assoluto al pixel preciso per ricostruire la mappa d’Italia intera. La proprietà css opacity è usata sul stato hover dei link e rende visibile le informazione relative alla provincia scelta grazie alla proprietà display.
Visualizza questa mappa css >>
css-menu-esempio-8.zip (110.3 KiB, 8,902 hits)
Mappa css provata su IE6, IE7, FF2, FF3, Safari 3, Opera 9 su Windows.
Aggiornamento 20 Aprile 2009: per chi è interessato a mantenere le relative informazione attive on click delle province, questa mappa css d’Italia è stata modificata con l’aggiunto di Javascript da Salvatore Di Modica e è scaricabile gratuitamente.
css-menu-esempio-8-con-javascript.zip (165.0 KiB, 4,761 hits)
About The Author
luca
Grazie molto bello questo css.
Adriano
Ciao. Bello!
Ma se volessi che sul “onMouseOut” non tornasse la videata di partenza ?
Mi spiego meglio: una volta che porto il mouse su, per esempio, Liguria, compare l’immagine e la scritta abbinati, quando sposto il mouse vedo di nuovo la videata di default. Se invece avessi bisogno di mantenere il testo relativo alla Liguria, come posso fare?
Grazie
Onsitus
Ciao Adriano,
Si potrebbe usare a:active span (dopo il a:hover span)in modo che rimane visibile. Sarebbe da provare al livello compatibilità  .
barbara
ciao,
vedo spesso parlare di span
ma non capisco a cosa servono,
potrei avere gentilmente qualche delucidazione?
grazie mille
Onsitus
Ciao Barbara,
l’elemento html ‘span’ per sei stesso non ha utilità  , nel senso che il suo contenuto non subisce cambio visuale come per esempio un elemento ‘b’ per il testo grassetto. Principalmente permette di ‘delimitare’ una parte del contenuto per poi riusarlo come selettore css.
Un esempio di base sarebbe se vuoi evidenziare in un contenuto testo certe parole in rosso:
<p>lorem ipsum is a dummy text <span class="rosso">testo in rosso</span> lorem ipsum</p>
Style css:
span.rosso{
color:red;
}
Cosi facendo, ogni volta che avrai un span con il nome di classe rosso, sarà  colorato.
Onsitus
Aggiungo… il ‘span’ è un elemento ‘inline’. Per quella ragione e uno dei pochi che può essere contenuto dentro un link (elemento ‘a’ anche lui inline) come nel caso della mappa. Qui la differenza tra inline e block:http://css.flepstudio.org/css-tips/block-inline.html
barbara
grazie
ora è più chiaro
LADODI
Il css italia è stupendo! Per caso sapete indicarmi dove trovare una mappa css dell’europa grazie mille
infinito2001
Utilissima!
Carmelo Catalano
Salve, intanto complimenti per la mappa,p davvero grandiosa
…io volevo sapere se è possibile, oltree quello che già  è stato realizzato, dicevo, se è possibile legare un link per ogni regione, in pratica, sfiorando la rgione di intersse con il mause appare la descrizione come succede adesso, cliccando sempre sulla regione di interesse, si raggiunge un link o una pagina…si può fare ?
Se si come ?
Grazie
Onsitus
xCarmelo: bsta inserire il tuo link nel html al posto del #nogo
alessandro
Stupendo! ma come hai fatto a ricavare il CSS delle regioni, intendo dire la posizione di ogni regione rispetto alle altre?
che tool hai usato? che funzione? Fireworx per caso ? se si che versione?
Giuseppe
e’ possibile avere il javascript che ha un link non valido?
Onsitus
Ciao, ci sono qualche problemi con il sito della persona che aveva creato la versione con javascript. Vedo se arrivo a contattarlo direttamente via email e se posso rintracciare il file.
Marco
Ciao,
si, se riesci a rintracciare il tizio delle mappe provinciali facciamo bingo!
Grazie e facci sapere!
M
Criss
Salve, devo dire che con questo script era esattamente quello che cercavo. Ma se volessi avere la carta d’Italia alla destra del testo, quali modifiche al codice devo apportare?
Onsitus
Ciao Criss,
il tuttoè posizionato in modo assoluto. Dovresti cambiare l’allineamento orizzontale per ogni elemento.
Per #mappa a:hover span, #mappa #info, cambiare right:10px; con left:10px;
Per ogni regione (#aosta, #piemonte…etc…etc), aumentare il valore di left in modo che si spostano verso la destra…ad occhio 270/280 px in più del valore attuale.
sergio
Mi daresti indicazioni dettagliate su come fare a realizzare quello che chiedeva adriano? ovvero far si che rimanga la regione desiderata anche quando esco dall’area corrispondente. Oppure sarebbe ancora meglio se si potesse fare su click. Grazie mille e complimenti!
Onsitus
Ciao Sergio,
sarebbe l’esempio con il javascript. C’è il css-menu-esempio-8-con-javascript.zip alla fine del articolo da scaricare.
lara
ciao,
molto bella la mappa!davvero!
ho un problema…ho scaricato la versione con on click delle province, ma cliccando sulla regione trentino praticamente non si vusualizza la regione…puoi dirmi se c’è una soluzione?
Onsitus
Ciao Lara, si. C’era un errore nel html. Ho caricato il nuovo zip file!
Luca
ciao,
da dove posso scaricare il file d’esempio?
Il link “DOWNLOAD ZIP FILE” mi riporta alla pagina iniziale…
ciao
Luca
Giuseppe Sin
i scarico il file ma forse sbaglio qualcosa !! qual’e’ la parte che va messa in css !! e qual e’ la parte che va messa nell’html ?
Onsitus
Tutta la parte in ‘style type=”text/css’ dal commento ‘inizio stile css mappa’ è il css. Per l’html il tutto è contenuto in ‘div id=”wrap_mappa”‘.
Rossana
salve
anche per me questo era ciò che mi serviva l’unica cosa e che nel riquadro testuale vorrei inserire del testo che linka ad una pagina….ho provato con A HREF etc….ma sballa tutto, mi appaiono nel contenitore tutti i testi linkati sovrapposti alla mappa…..sembra non accetti due collegamenti ipertestuali insieme.
Come faccio?
Marcello Cannarsa
Si può fare una cosa simile per un telefono dove ci passo sopra il mouse e cambia di colore … ?
Per esempio: io voglio cambiare il colore dei pulsanti del telefono da bianchi a neri o più scuri, come devo fare?
Giuseppe
Ciao Ragazzi, sono giuseppe. Devo dire che la mappa è ottima. Ho apportato delle modifiche che mi danno le regioni al posto delle immagini ed in oltre ho inserito i punti coord per i capoluoghi.
Io avrei una domanda da porre all’editore della mappa:
È possibile sovrapporre il div”info” sulla mappa italia stessa e con un comando java ritornare sulla principale?
Grazie mille. Giuseppe.
Michele
Ciao, complimenti per il sito e per il post, tutto interessantissimo. Mi stavo chiedendo dove sia possibile trovare delle immagini un po’ più grandi delle regioni d’Italia, magari un psd con tutte le regioni in layer separati, in modo da gestirne le dimensioni e i colori… spero non stia chiedendo troppo. Grazie
Criss
Ciao Onsitus, non so se controlli ancora questa sezione commenti. Ho un piccolo problema utilizzano il tuo script. Pur avendo nel codice la tag alt=”" (per esempio ) non mi compare quando vado col mouse sopra la regione. Hai un’idea del problema?
Leonardo
Ho lo stesso problema di Rosanna, e cioè vorrei inserire dei link testuali nel box testo a destra.
Simona
Nella mia pagina i link risultano sfasati rispetto alle singole regioni (esempio: posizionando il mouse sul Veneto, mi viene selezionato il Friuli), mi sapete dire come risolvere? :]
Leonardo
Ciao Onsitus, potresti dare una risposta ai nostri questiti? Grazie
Massimiliano
Grazie per lo script! Utilissimo!
Andrea Lolli
Ciao la tua cartina è molto bella, io ho un sito di annunci gratuiti,avrei bisogno che i miei utenti quando selezionano la regione, venga fuori l’annuncio di quella regione e città .
Per te è possibile se si come
Grazie