• Programmazione » CSS » Tutorial CSS

Un esempio classico di "mappa cliccabile" potrebbe essere un immagine dell'Italia in cui, cliccando sulle varie regioni, richiamare le pagine ad esse relative.

Nessun problema per una cartina d'Italia ma se dobbiamo rendere palesi queste aree cliccabili su d'una cartina stradale (ad esempio per indicare i punti di ristoro, i parcheggi, etc.) la prima idea che ci viene in mente è quella di sovrapporre alla mappa delle immagini gif animate che, magari "lampeggiando" , attraggano maggiormente l'attenzione.

Una bella idea ma irrealizzabile con le normali "mappe cliccabili" (n.d.a. o quantomeno io non ci sono mai riuscito!) ed è a questo punto che entrano in gioco i CSS: possiamo infatti utilizzare l'immagine della cartina stradale come immagine di sfondo di un <div>...</div> e, al suo "interno" , posizionare le gif dei nostri "segnalini".

Vediamo quindi i CSS necessari:

<style type="text/css">
/* div della mappa */
#cssmap
{
width: 500px;
height: 500px;
background: url('cartina.jpg');
border: 1px solid #000;
position: relative;
}

innanzitutto viene impostata la dimensione del <div> eguale alla dimensione dell'immagine da utilizzare come mappa che, a sua volta, verrà utilizzata come sfondo del <div> stesso. La tipologia di posizionamento deve essere "relativa" altrimenti sarà ben difficile riuscire poi a posizionare i nostri segnalini. Un piccolo bordo poi, non guasta mai anche se non è indispensabile.

/* Elenco puntato: ul */
#cssmap ul
{
background: transparent;
padding: 0;
margin: 0;
width: 500px;
height: 500px;
list-style: none;
}

Volendo utilizzare gli elenchi puntati debbono essere necessariamente impostate alcune proprietà per il tag <ul> interno al <div> della mappa: per prima cosa lo sfondo trasparente in modo da consentire la visione dell'immagine di sfondo, quindi margini e spaziatura dal bordo azzerate, dimensioni eguali a quelle del <div> e nessuno stile per le voci dell'elenco.

/* Link inseriti nelle voci dell'elenco puntato */
#cssmap ul li a {
position: absolute;
display: block;
cursor: pointer;
z-index: 100;
}

I vari anchor inseriti nelle voci dell'elenco puntato dovranno avere una posizione assoluta, mostrare come cursore la classica "manina" ed avere uno z-index abbastanza alto o, comunque, superiore a quello eventualmente assegnato al <div> contenente la mappa.

/* Posizionamento punti */
#cssmap ul li.p1 a { left: 200px; top: 200px; } /* Primo segnalino */
#cssmap ul li.p2 a { left: 270px; top: 400px; } /* Secondo segnalino */
#cssmap ul li.p3 a { left: 143px; top: 392px; } /* Terzo segnalino */
</style>

Ogni voce <li>...</li> è identificata univocamente da un suo id che, in questo caso, è la lettera "p" seguita da un numero progressivo a partire da uno. Il valore assegnato ai vari id non è restrittivo: potete benissimo utilizzarne altri a vostro piacimento.

Come visibile dal codice, per ogni punto vengono dichiarati i valori al posizionamento left e top sapendo che le coordinate left 0 e top 0 corrispondono all'angolo in alto a sinistra della nostra mappa. Se visualizzando la mappa notaste che uno o più punti sono esterni ad essa (a destra o in basso) significa che avete inserito un valore di left e/o top che eccedono la dimensione della mappa stessa.

Terminata la definizione dei CSS, vediamo il codice HTML della "mappa" che non credo abbia bisogno di spiegazione alcuna data la relativa semplicità:

<p style="font-weight: bold; font-size: 24px;">Mappa cliccabile simulata con CSS</p>
<div id="cssmap">
<ul>
<li class="p1"><a href="#"><img src="punto_1.gif" border="0"></a></li>
<li class="p2"><a href="#"><img src="punto_2.gif" border="0"></a></li>
<li class="p3"><a href="#"><img src="punto_3.gif" border="0"></a></li>
</ul>
</div>

Gli anchor potranno poi essere personalizzati in base alle proprie esigenze: inserendo gli indirizzi URL nell'attributo href, intercettati gli eventi onmouseover ed onmouseout, etc. in poche parole ... come qualsiasi altro link.