Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » La notte della mappa immagine

La notte della mappa immagine

di Stuart Robertson, traduzione di Gdesign e Chenoa, 26 Luglio 2004

Versione Stampabile

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.

^Top

Dai un voto a questo articolo:   HITS: 1 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 1