Anche il più inesperto appassionato del web dotato di un sito personale è capace di includere un'immagine all'interno della propria pagina. Molto spesso poi all'immagine viene associato un link ipertestuale in modo da reindirizzare un eventuale click sopra alla grafica verso un'altra pagina o ad una particolare azione.Non è così semplice creare una mappa a partire da un'immagine, ovvero suddividere una singola immagine in aree separate ed associare il click ad ogni area ad una pagina o ad una azione differente. Per capire di cosa si tratta, provate a giocare con l'immagine qui a lato.
Per semplicità ci sono tre aree ben distinte nell'immagine e posizionando il mouse sopra alle tre aree vedrete comparire un tooltip (quella scritta in sovraimpressione) con un messaggio differente. Se cliccate sopra ad ogni singola pagina, finirete su una pagina diversa. Provate per credere.
Come realizzare questo semplice esempio?
Il codice HTML che c'è dietro a questo semplice esempio è il seguente:
<!-- Prima parte: inserimento dell'immagine e del collegamento -->
<a href="http://unico-site.comze.com/html-map/map.png">
<img alt="" id="mappa1"
src="http://unico-site.comze.com/html-map/map.png"
usemap="#mappa1" />
</a>
<!-- Seconda parte: definizione mappa -->
<map name="mappa1" id="mappa1">
<area alt="Area 1" coords="9,14,12,107,83,110,246,16,"
href="http://unico-site.comze.com/html-map/area.php?a=1"
shape="poly" title="Area 1"></area>
<area alt="Area 2" coords="243,32,109,167,242,244,"
href="http://unico-site.comze.com/html-map/area.php?a=2"
shape="poly" title="Area 2"></area>
<area alt="Area 3" coords="8,178,72,239"
href="http://unico-site.comze.com/html-map/area.php?a=3"
shape="rect" title="Area 3"></area>
</map>
L'idea è semplice, c'è una prima parte in cui inserite un'immagine normalmente usando la tag img come fareste di solito con l'unica accortezza di specificare l'attributo usemap il cui valore deve essere il nome della mappa preceduto da #.
La seconda parte è la definizione della mappa (<map>) vera e propria che a sua volta è composta da un certo numero di aree ognuna identificata da un tag <area&tg;. Ogni area deve essere descritta con i parametri seguenti: l'indirizzo (href) a cui si vuole inviare l'utente, la forma (shape) e le coordinate (coords) in pixels. Questa è decisamente la parte più ostica di tutta la procedura, perché non è così scontato che uno sappia ottenere facilmente questa informazione. Una possibilità è di utilizzare un software per l'editing grafico, come Gimp che è gratuito ed open source, posizionare il mouse su i punti necessari per definire un'area e segnarsi le coordinate che vengono mostrate nella barra di stato sul bordo inferiore della finestra. Esiste anche una soluzione più semplice che vedremo nel dettaglio nel seguito.
Nel caso specifico qui sopra, ogni area indirizza l'utente alla stessa pagina web, ma con differenti parametri. Il server, cattura i parametri passati con metodo GET e modifica l'aspetto della pagina d'arrivo che è in realtà molto semplice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<link rel="icon"
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghrFkskriE7f-wDJFNoxapiwZhpdrmWf8oiceiU3iMzE5QeWoXI1RBk6Ac4tAeqy7bpi4mTL7MNZ_XRx9LNYNWZBU34OyP3rbNCYQOpbXlU4cYZOBoKlBlE3iIOM7mS8ToDkncSFdsEqo/" type="image/png">
<title>Area <?php echo $_GET['a']; ?></title>
</head>
<body>
<h1>Area <?php echo $_GET['a']; ?></h1>
<p>Torna <a href="javascript:history.back()">indietro</a></p>
</body>
</html>
Questo approccio non è assolutamente necessario, voi potete usare tre link completamente differenti, persino con protocolli differenti tipo mailto: giusto per fare un esempio.
Un po' più complesso
Questo era un esempio facile facile, ma funzionale. Però si possono fare cose anche un po' più complesse che non richiedono una laurea in informatica e che offrono al visitatore una più piacevole esperienza di navigazione. Per esempio possiamo associare ad ognuna delle area della mappa una differente azione quando l'utente vi passa sopra con il mouse. Provate con il secondo esempio qui a lato.Vedete che posizionando il mouse sopra una delle tre aree, l'immagine cambia di aspetto e le aree non selezionate sembrano sbiadire per dare un maggiore impatto all'area selezionata. Un effetto del genere si può ottenere utilizzando gli eventi onmouseover e onmouseout dell'oggetto img e richiede di elaborare altre immagini, simili a quella originale.
Nel caso dell'esempio, sono state generate altre tre immagini, praticamente identiche a quella originale, per lo meno per quanto riguarda la dimensione complessiva e delle singole regioni, solo che i colori di due delle tre aree sono stati sbiaditi. Potete vedere le tre immagini separate qui sotto:
Ma andiamo a vedere il codice necessario per ottenere questo effetto.
<!-- Prima parte: inserimento dell'immagine e del collegamento -->
<a href="http://unico-site.comze.com/html-map/map.png" >
<img id="img2" alt=""
src="http://unico-site.comze.com/html-map/map.png"
usemap="#mappa2"/>
</a>
<!-- Seconda parte: definizione mappa -->
<map name="mappa2">
<area alt="Area 1" coords="9,14,12,107,83,110,246,16,"
href="http://unico-site.comze.com/html-map/area.php?a=11"
onmouseout="if(document.images)
document.getElementById('img2').src=
'http://unico-site.comze.com/html-map/map.png';"
onmouseover="if(document.images)
document.getElementById('img2').src=
'http://unico-site.comze.com/html-map/map-area1.png';"
shape="poly" title="Area 1">
</area>
<area alt="Area 2" coords="243,32,109,167,242,244,"
href="http://unico-site.comze.com/html-map/area.php?a=12"
onmouseout="if(document.images)
document.getElementById('img2').src=
'http://unico-site.comze.com/html-map/map.png';"
onmouseover="if(document.images)
document.getElementById('img2').src=
'http://unico-site.comze.com/html-map/map-area2.png';"
shape="poly" title="Area 2">
</area>
<area alt="Area 3" coords="8,178,72,239"
href="http://unico-site.comze.com/html-map/area.php?a=13"
onmouseout="if(document.images)
document.getElementById('img2').src=
'http://unico-site.comze.com/html-map/map.png';"
onmouseover="if(document.images)
document.getElementById('img2').src=
'http://unico-site.comze.com/html-map/map-area3.png';"
shape="rect" title="Area 3">
</area>
</map>
Notate come nella parte di inserimento dell'immagine, sia stata aggiunto l'attributo id all'immagine stessa. Questo ci serve per poter manipolare con un Javascript contenuto nella seconda parte la sorgente dell'immagine. Nella seconda parte, nelle righe evidenziate, vedete come è stato implementato l'evento onmouseout e onmouseover: innanzitutto verifica che nel documento ci siano immagini, quindi prende quella idenfiticata dall'id img2 e ne cambia la proprietà src in modo da riassegnarla alla nuova immagina nel caso di onmouseover, o a quella originale in caso di onmouseout.
Fare tutto in modo semplice
Fino a questo punto abbiamo buttato le basi per capire come si possa fare una mappa da sovrapporre ad un'immagine per migliorare l'esperienza di navigazione dei nostri lettori. Anche se non complessa è una procedura piuttosto macchinosa e che richiede una buona dose di manualità con l'HTML. Insomma, qualcosa che per il neofita del web o per chi vuole semplicemente mettere un nuovo gadget sul suo blog.
Tutto il processo può essere di gran lunga semplificato usando uno strumento on-line che per il momento è ancora gratuito, ma potrebbe non esserlo più in futuro. Il sito da aggiungere nei vostri bookmark è Image Map Tool e potrete fare tutto quello che avete visto in questo mini-tutorial con pochi semplici click. Il sito è in inglese, ma lo strumento per la creazione della mappa è relativamente intuitivo. Se avete problemi ad utilizzarlo, basta che lasciate un commento qui sotto e vediamo di venirvi in aiuto.
