ISSN 1722-375X
[Vai al menu di navigazione principale]


Home > Tips > Emulare le immagini mappate con i css > Emulare le immagini mappate con i CSS

[Vai al piè di pagina]

Emulare le immagini mappate con i CSS

Tramite i CSS è possibile realizzare immagini mappate utilizzando una semplice lista di link. Il codice XHTML è assolutamente semplice e totalmente accessibile con qualsiasi dispositivo. Il codice CSS è di facile comprensione e completamente personalizzabile.

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.

immagine utilizzata nella pagina di esempio

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 che si ottiene senza il codice 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 che si ottiene col codice finora illustrato

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à top e left è 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.

Esempio del risultato che si ottiene col codice finora illustrato

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%.

Esempio del risultato che si ottiene col codice finora illustrato

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 }

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

Esempio del risultato finale

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.

Commenti sull'articolo

G.T. -- ultima revisione: 15.04.2003

File correlati

Articoli correlati:


Strumenti



l'indirizzo di questa pagina è: http://www.constile.org/tips/emulare_le_immagini_mappate_con_i_css/index.php