La notte della mappa immagine
di Stuart Robertson, traduzione di Gdesign e Chenoa, 26 Luglio 2004
L'articolo (in lingua inglese) proviene da A List Apart ed è stato tradotto e riprodotto per gentile concessione dell'autore.
In passato, prima che venissero a conoscenza degli standard web e dell'importanza dell'accessibilità, i web designer utilizzavano le mappe immagine per dividere rapidamente una singola immagine in regioni e collegare queste regioni a diversi URL. Le mappe immagine tradizionali, tuttavia, non funzionano bene con i browser testuali e non sono efficienti o versatili come molte tecniche più recenti. Le potete trovare ancora in uso su una vecchia pagina web oppure per qualche tipo di mappa complessa, ma la maggior parte dei web designer le considera una tecnica superata.
Durante la collaborazione ad un progetto web su una fiction dell'orrore, decisi dal primo momento che avrei fatto del mio meglio per realizzare il sito utilizzando soltanto codice standard XHTML e CSS. Quando l'altro designer mi inviò la sua idea per il sito, iniziai a disperare. Lui voleva che la pagina assomigliasse ad un vecchio libro logorato, con i bordi grezzi e le pagine sporche. Le voci del menu dovevano essere sparpagliate nella pagina. Come potevo trasformare un documento ben strutturato in qualcosa che apparisse così organico?
Mi vennero in mente le mappe immagine.
Erano terribilmente fuori moda, ma con le mappe immagine potevo fare le cose in modo semplice anzichè tagliare l'immagine di sfondo in dozzine di pezzi e tentare poi di usare i CSS per unirli. Poteva apparire strano pensare di usarli di nuovo, ma i vecchi metodi sembravano dare la giusta risposta. Decisi di ritornare in laboratorio per vedere se potevo utiilizzare la moderna scienza dei CSS per riportare in vita questa tecnica del web design.....
Questi sono i fatti così come li conosciamo
Nella nostra mappa immagine, useremo i CSS per creare dei collegamenti invisibili e fluttuanti sopra l'immagine di sfondo dove abbiamo bisogno che stiano.
Iinnanzitutto creiamo un div esterno che sarà usato
per applicare l’immagine di sfondo. I nostri collegamenti andranno
in un div nidificato, mantenendo il nostro codice ben organizzato
e permettendoci di applicare gli stili ai collegamenti come ad un gruppo.
Il div nidificato può inoltre essere utile quando si
utlizza uno switch per i fogli di stile per creare effetti CSS alternativi
per il menu.
<div id="book"> <div id="menu"> ... </div> </div>
Adesso possiamo mettere i singoli collegamenti all'interno del nostro div nidificato.
Dare ad ogni collegamento un proprio id ci permette di posizionarli
sulla pagina in maniera indipendente. Gli id separati, inoltre,
si comportano come ancore, permettendo agli utenti di selezionare direttamente
i collegamenti dovunque siano posizionati sulla pagina.
Per rendere invisibile il testo all'interno di ogni collegamento, abbiamo
bisogno di aggiungere un altro tag nidificato. Preferisco utilizzare dei
tag <i> semanticamente insignificanti perché forniscono
indizi visuali della loro presenza in mancanza di un foglio di stile, che
ne facilita il lavoro. Inoltre sono molto coincisi, il che contribuisce all'efficenza
del codice. Comunque, potete usare senza problemi <span>, <em>,
o qualche altro tag che preferite.
<div id="book"> <div id="menu"> <a href="index.html" id="home"><i>Home</i></a> <a href="preface.html" id="preface"><i>Preface</i></a> <a href="stories.html" id="stories"><i>Stories</i></a> <a href="galleries.html" id="gallery"><i>Galleries</i></a> <a href="forums.html" id="forum"><i>Forum</i></a> <a href="mementos.html" id="mementos"><i>Mementos</i></a> <a href="credits.html" id="credits"><i>Credits</i></a> <a href="indicia.html" id="indicia"><i>Indicia</i></a> </div> </div>
Questo è tutto l'XHTML di cui abbiamo bisogno. Vediamo il risultato nell'Esempio 1. Adesso possiamo andare avanti per creare l'effetto della mappa immagine con il nostro foglio di stile.
Guidati da una progettazione principale
Nel vostro file CSS aggiungete un colore di sfondo per il body ed
impostate il margin ed il padding a 0. Intendiamo utilizzare il posizionamento
assoluto che ci sarà d'aiuto per i nostri calcoli.
body {
background-color: #000;
margin: 0;
padding: 0;
}
Lo sfondo per la nostra mappa immagine è applicato al div esterno.
Per essere certi che l'immagine di sfondo venga visualizzata interamente
dovreste impostare valori appropriati di altezza e di larghezza.
#book {
background-image: url(images/bookpages.jpg);
height: 595px;
width: 750px;
}
Gli stili che si applicano alla maggior parte dei link possono essere definiti
insieme. Le regole CSS più specifiche, allora, possono essere usate
per cambiare gli attributi dei singoli collegamenti come richiesto. Utilizzate
il posizionamento assoluto ed includete un'altezza (height),
un'ampiezza (width) e un posizionamento dall'alto (top)
di default per tutti i collegamenti. A questo punto rimuoviamo le sottolineature
dei collegamenti.
#menu a {
position: absolute;
height: 38px;
width: 88px;
top: 31px;
text-decoration: none;
}
Per nascondere il testo dei collegamenti mantenendoli “cliccabili”,
utilizziamo un selettore CSS che identifica il testo in corsivo all'interno
dei collegamenti contenuti nel nostro div nidificato, ed impostiamo
la sua visibilità (visibility) su nascosto (hidden).
E' importante utilizzare per ogni collegamento un testo significativo, anche
se per la maggior parte dei vostri utenti sarà invisibile. Questo
garantisce che il vostro sito sarà accessibile ai browser che non
supportano i CSS e agli utenti che lo visitano con un foglio di stile alternativo.
#menu a i { visibility: hidden; }
Una volta che il CSS generale è a posto, possiamo posizionare ciascun
collegamento individualmente. Per migliorare l’efficenza, gli attributi
comuni dei collegamenti come left o top possono
essere definiti insieme.
a#credits, a#indicia { top: 531px; }
a#home { left: 101px; }
a#preface { left: 221px; }
a#stories { left: 311px; }
a#gallery { left: 431px; }
a#forum { left: 526px; width: 61px; }
a#mementos { left: 591px; width: 98px; }
a#credits { left: 431px; }
a#indicia { left: 591px; }
Quando applichiamo il CSS all'XHTML del nostro documento, i collegamenti fluttuano in maniera indipendente sopra la nostra immagine di sfondo. Se li posizioniamo sopra le aree dell'immagine che somigliano a dei collegamenti, saremo a posto. Il corretto posizionamento dei collegamenti necessita di solito di calcoli accurati e di qualche prova per eliminare eventuali errori.
Le mappe immagine CSS possono utilizzare lo pseudo elemento hover per
definire uno stile separato per ogni collegamento in rollover. Ciò ci
permette di far fluttuare le nuove immagini sopra quelle precedenti ogni
volta che l'utente sposta il suo mouse su una delle aree di collegamento.
a#home:hover { background-image: url(images/homeglow.jpg); }
a#preface:hover { background-image: url(images/prefaceglow.jpg); }
a#stories:hover { background-image: url(images/storiesglow.jpg); }
a#gallery:hover { background-image: url(images/galleryglow.jpg); }
a#forum:hover { background-image: url(images/forumglow.jpg); }
a#mementos:hover { background-image: url(images/mementosglow.jpg); }
a#credits:hover { background-image: url(images/creditsglow.jpg); }
a#indicia:hover { background-image: url(images/indiciaglow.jpg); }
Un bug di Internet Explorer, che causa alle immagini rollover di astenersi
dallo scomparire come previsto, puo’ essere riparato aggiungendo border:
none allo stato :hover di tutti i collegamenti della
mappa immagine CSS.
a#home:hover,
a#preface:hover,
a#stories:hover,
a#gallery:hover,
a#forum:hover,
a#mementos:hover,
a#credits:hover,
a#indicia:hover { border: none; }
Potete vedere il risultato finale della nostra mappa immagine CSS nell'Esempio 2.
Post mortem
L'uso di immagini di sfondo pesanti non è adatto a chi dispone poca banda di collegamento, ma può produrre design avvicenti e dare ai visitatori che navigano a banda larga una ricca esperienza visuale. Visto che le mappe immagine CSS utilizzano codice XHTML standard, potremmo usare uno switch per i fogli di stile in modo da fornire una versione alternativa a chi dispone di poca banda.
Un ringraziamento particolare a Nate Piekos e Shane Clark per il loro lavoro su Dead Ends, Massachusetts, dove le mappe immagine sono state riportate in vita.
:: Pagina stampata da http://www.gdesign.it ::