Corsi on-line

Simulare le mappe di immagine con i CSS

  • CommentiScrivi un commento
  • ForumDiscuti sul forum
  • Prev
  • NextSimulare le mappe di immagine con i CSS
    Pagina 2 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.
Anteprima della mappa

Prendiamo un'immagine di esempio e vediamo cosa intendiamo ottenere come risultato finale:

Abbiamo dunque a disposizione un'immagine con degli elementi ben precisi, quadrati e perfetti, anche se disposti "a caso" all'interno dell'immagine che li contiene.

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.

L'articolo continua dopo la pubblicità

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.

Corsi
Vedi anche...
Guide