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, 4,224 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 KiB, 644 hits)
{ 3 trackbacks }
{ 21 comments… read them below or add one }
Grazie molto bello questo css.
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
Ciao Adriano,
Si potrebbe usare a:active span (dopo il a:hover span)in modo che rimane visibile. Sarebbe da provare al livello compatibilità.
ciao,
vedo spesso parlare di span
ma non capisco a cosa servono,
potrei avere gentilmente qualche delucidazione?
grazie mille
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.
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
grazie
ora è più chiaro
Il css italia è stupendo! Per caso sapete indicarmi dove trovare una mappa css dell’europa grazie mille
Utilissima!
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
xCarmelo: bsta inserire il tuo link nel html al posto del #nogo
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?
e’ possibile avere il javascript che ha un link non valido?
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.
Ciao,
si, se riesci a rintracciare il tizio delle mappe provinciali facciamo bingo!
Grazie e facci sapere!
M
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?
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.
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!
Ciao Sergio,
sarebbe l’esempio con il javascript. C’è il css-menu-esempio-8-con-javascript.zip alla fine del articolo da scaricare.
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?
Ciao Lara, si. C’era un errore nel html. Ho caricato il nuovo zip file!