Emulare le immagini mappate con i CSS

L’esempio

La pagina di esempio, se visitata con un browser in grado di supportare i CSS, presenta una semplice immagine con quattro aree distinte. Ad ogni immagine sarà associato un link.

Il codice XHTML utilizzato è di seguito riportato:

<ul id=”mappa1″>
<li id=”mappa1-link1″><a title=”link area 1″ href=”link1″><span class=”alt”>link1</span></a></li>
<li id=”mappa1-link2″><a title=”link area 2″ href=”link2″><span class=”alt”>link2</span></a></li>
<li id=”mappa1-link3″><a title=”link area 3″ href=”link3″><span class=”alt”>link3</span></a></li>
<li id=”mappa1-link4″><a title=”link area 4″ href=”link4″><span class=”alt”>link4</span></a></li>
</ul>

Come si vede, si tratta di una semplice lista, con opportuni identificatori. Alla mappa è stato associato l’identificatore mappa1, per distinguerla da altre eventuali mappe. Ad ogni elemento della lista è stato associato un differente identificatore per distinguere i differenti link. Il testo alternativo da associare ad ogni area della mappa è stato inserito tramite l’attributo title dei link. Si noti che tale testo alternativo non occorre per i browser non grafici, che di fatto leggono il normale testo dei link, ma per i browser in grado di interpretare i CSS (non sempre l’immagine è completamente “auto-esplicativa”).

Il codice CSS utilizzato per l’esempio è il seguente:

ul#mappa1 {
margin:0;padding:0;
list-style:none;
position:relative;
width:300px;height:300px;
background:url(“mappa.gif”) no-repeat;
}
ul#mappa1 li {
display:block;
position:absolute;
margin:0;padding:0
}
li#mappa1-link1 {
left:0;top:0;
width:54px;height:43px
}
li#mappa1-link2 {
left:55px;top:44px;
width:104px;height:71px
}
li#mappa1-link3 {
left:160px;top:44px;
width:140px;height:134px
}
li#mappa1-link4 {
left:96px;top:209px;
width:174px;height:56px
}
#mappa1 a {
display:block;
width:100%;
height:100%;
}
#mappa1 .alt { display:none }

Il codice CSS

Senza il codice CSS, la mappa appare come un normale lista.

Esempio del risultato senza l'applicazione dei CSS

In questo modo, con qualsiasi browser, i link saranno accessibili.

ul#mappa1 {
margin:0;padding:0;
list-style:none;
position:relative;
width:300px;height:300px;
background:url(“mappa.gif”) no-repeat;
}

Innanzi tutto eliminiamo i margini e il padding propri della lista e i marcatori della lista (tramite la proprietà list-style). La lista è posizionata in modo relativo in modo da costituire il riferimento per il posizionamento assoluto dei link al suo interno.
Altezza e larghezza della lista sono pari a quelli dell’immagine da mappare che sarà posta come sfondo della lista.
A questo punto il risultato che si ottiene è rappresentato dall’immagine di seguito riportata.

Esempio del risultato ottenibile col codice finora presentato

Si vede come in questo modo l’immagine da mappare è portata su schermo, per ora i link sono ancora disposti secondo la lista.

ul#mappa1 li {
display:block;
position:absolute;
margin:0;padding:0
}
li#mappa1-link1 {
left:0;top:0;
width:54px;height:43px
}
[…]
li#mappa1-link4 {
left:96px;top:209px;
width:174px;height:56px
}

Ogni elemento della lista è posizionato in modo assoluto. Tramite le proprietà topleft è possibile disporre ogni link nell’angolo superiore sinistro di ogni area da mappare. Tramite le proprietà width ed height si determina l’area occupata da ogni elemento della lista. Tale area deve sovrapporsi alla zona corrispondente nell’immagine da mappare.

I link sono posizionati sull'angolo superiore sinistro delle diverse aree

Si noti che ogni link occupa ancora solamente l’area del testo.

#mappa1 a {
display:block;
width:100%;
height:100%;
}

Affinché sia cliccabile tutta l’area occupata da ogni elemento della lista, si è trasformato il il tag A in block e le dimensioni orizzontale e verticale sono poste pari al 100%.

Il link occupa tutte l'area delle zone da mappare

In questo modo, il link occupa tutta l’area a sua disposizione, ovverosia tutta l’area occupata dall’elemento della lista in cui il link è inserito. Ricordiamo che ogni elemento della lista occupa un’area pari a quella della zona da mappare.

#mappa1 .alt { display:none }

Il risultato finale: non c'è più traccia della lista di link

Infine eliminiamo il testo dal link, sfruttando la proprietà display associata alla classe alt.

Vantaggi e limiti

Vantaggi

I vantaggi sono evidenti. La lista di link è accessibile con qualsiasi dispositivo per l’accesso ad internet, compresi PDA e smartphone. Il codice XHTML necessario è semplice e leggero, con vantaggi evidenti sul peso delle pagine e sul traffico. Si ricordi che il codice CSS rimane nella cache del computer, mentre il codice (X)HTML deve sempre essere ricaricato.

Il codice CSS necessario è molto semplice ed intuitivo, facilmente personalizzabile.

Il metodo è compatibile con Opera 5 e superiori, Internet Explorer 5 (Win/Mac) e superiori, Netscape Navigator 6 e superiori, Mozilla, Konqueror 3 e Safari.

Limiti

L’unico vero limite di questo metodo (trascurando l’ovvia incompatibilità con Netscape Navigator 4) consiste nel fatto che le aree mappabili possono essere solo rettangolari. In alcuni casi le immagini mappate richiedono aree cliccabili di forma differente, ma aree rettangolari hanno sicuramente un vasto campo di applicazione.

Potrebbero interessarti anche i seguenti articoli

  • La struttura di un documento XHTMLLa struttura di un documento XHTML Il linguaggio XHTML si presenta allo sviluppatore di pagine Web come linguaggio di marcatura, e come tale prevede l’uso di particolari “etichette”, […]
  • 1 – Il modello del GAP1 – Il modello del GAP Per meglio comprendere il tutto, magari tramite una rappresentazione grafica, propongo alla tua attenzione il “modello del gap” (gap model, gap = differenza, distanza, […]
  • Affrontare l’accessibilitàAffrontare l’accessibilità Presentazione  "Affrontare l'accessibilità: per un sito più accessibile in 30 giorni" è la traduzione in italiano di  "Dive Into Accessibility: 30 days to a […]
  • Moduli (Form) accessibiliModuli (Form) accessibili I Moduli di interrogazione (Form) sono senz’altro il primo scoglio per l’accessibilità nell’interrogazione di qualsiasi banca dati. Esempio di […]
  • Sito parallelo? No, grazie!!!Sito parallelo? No, grazie!!! Una delle questioni che, soprattutto in questi mesi di progetti di Legge e di tante discussioni, si sta imponendo all’attenzione di tutti quelli che si occupano […]

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.