Simulare le mappe di immagine con i CSS
Pagina 1 di 2
Le mappe di immagine sono un utile strumento di gestione di un menu in casi particolari come la gestione di una cartina geografica o di una semplice foto nella quale si vuole rendere cliccabili singole porzioni di un'unica immagine.
Attraverso i CSS possiamo simulare la versione tradizionale delle mappe di immagine HTML, ovviamente con dei pro e dei contro.
- Pro
Utilizzo di meno codice HTML e leggerezza di caricamento e di esecuzione dell'effetto finale; - Contro
Meno flessibilità nella gestione di mappature non precise, proprio come l'esempio della mappatura di una cartina geografica nella quale gli elementi cliccabili (stati, regioni, e cosi via) non hanno un perimetro ben delineato.
Prendiamo un'immagine di esempio e vediamo cosa intendiamo ottenere come risultato finale:
Alla fine del nostro esempio, i quadrati A (rosso), B (verde) e C (blu) punteranno mediante link a tre ipotetici file di destinazione differenti: a.html, b.html e c.html.
Il codice HTML
Andiamo ad iniziare, analizzando per prima cosa il codice HTML della mappa:
<ul id="mappa">
<li id="link_a"><a href="a.html" title="Link A"></a></li>
<li id="link_b"><a href="b.html" title="Link B"></a></li>
<li id="link_c"><a href="c.html" title="Link C"></a></li>
</ul>
Tutto qui? Si, un semplice elenco puntato con dei link vuoti (senza oggetti cliccabili all'interno dei tag "ancora") all'interno.
Assegnamo un ID all'elemento principale dell'elenco e diversi ID ad ogni elemento della lista in modo da identificare in modo univoco le singole porzioni della mappa.
In codice CSS
Passiamo dunque al codice CSS, iniziando dalla stilizzazione dell'elemento principale dell'elenco-mappa:
#mappa
{
position: relative;
background-image: url(mappa.jpg);
background-repeat: no-repeat;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 220px;
height: 220px;
}
Gestiamo il posizionamento relativo dell'elemento ed impostiamo l'immagine come sfondo.
Andiamo poi ad inibire lo stile del puntatore, tutti i margini ed a specificare larghezza ed altezza dell'elenco-mappa, ovvero la grandezza dell'immagine in termini di dimensioni.
