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 […]
Condividi:

Informazioni sull'autore

Gianluca Troiani
Gianluca Troiani
Nato a Roma nel Gennaio del '76, da alcuni anni cerco di conseguire una laurea in Ingegneria Elettronica. Ho iniziato a realizzare siti web utilizzando una quantità esagerata di immagini, tabelle ed "effetti speciali": una orribile confusione. Abbandonati i tool WYSIWYG, ho abbracciato la causa dell'accessibilità, dell'usabilità, del rispetto degli standard W3C. Da tempo mi diverto a sperimentare le potenzialità dei CSS come unico strumento di definizione dell'aspetto delle pagine web.  L'esperienza accumulata mi ha mostrato come i CSS siano (insieme all'XHTML) l'unica via di salvezza per i webmaster e gli utenti dei siti web, poiché l'utilizzo dei fogli di stile permette di realizzare siti web leggeri, accessibili, usabili, conformi agli standard W3C, facili da gestire, belli. Ho così deciso di realizzare un intero sito web (www.constile.org) dedicato all'uso avanzato dei CSS, on-line dal 16 Ottobre 2002. Il 4 Novembre 2002 ho ricevuto una proposta di collaborazione al progetto Webaccessibile.org. Onorato dalla richiesta, ho accettato con entusiasmo. L'obiettivo che mi sono posto partecipando al progetto è la realizzazione di articoli che mostrino come i CSS possano contribuire al miglioramento dell'accessibilità di quello straordinario mezzo di comunicazione di massa noto col nome di "Internet".

Commenti

Nessun commento

    Rispondi

    Link e informazioni