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.
Mi permetto di segnalare che queste tecnologie seppur ancora valide e funzionanti sono destinate a scomparire a favore dell'oggetto CANVAS (implementato con HTML5) oppure con SVG.
RispondiEliminaQueste due tecnologie, oltre ad offrire effetti simili, gestiscono anche animazioni, cioè oggetti in movimento all'interno dell'immagine (se il browser utilizzato per visualizzarle le supporta).
Con un po' di javascript si possono invece implementare veri e propri video game anche in 3d con openGL...
http://www.html5today.it/esempi/skid-racer-gioco-3d-html5-tuo-browser
CANVAS, SVG e OPENGL sono tutti formati NON proprietari
Qui definizione e alcuni esempi anche di giochi in 3d...
RispondiEliminahttp://it.wikipedia.org/wiki/Canvas_(elemento_HTML)
Grazie mille, ottima segnalazione. Io sono totalmente analfabeta di HTML5 e del fratello CSS3 ho imparato ad apprezzare i benefici da poco tempo. Ha proprio ragione mio papà: non si smette mai di imparare ed è un peccato diventare vecchi e non poter apprezzare tutte queste migliorie!
RispondiEliminaAl momento la mia perplessità è che non tutti i browser sono compatibili e che ci sono tanti visitatori che sono ancora affezionati a browser di vecchia data.
Ho guardato il giochino in 3d e mi ricorda moltissimo un divertente giochino che ho sulla psp (mi sfugge il nome al momento) ed è incredibile che adesso sia giocabile all'interno del browser!
Va ricordato che essere usare browser di vecchia data non è una pratica consigliata a livello di sicurezza informatica.
RispondiEliminaScegliete il browser che preferite, ma tenetelo sempre aggiornatissimo...
Qui la tabella di compatibilità del canvas sui vari browser: http://caniuse.com/#feat=canvas
Guarda con me sfondi una porta aperta, anzi un portone spalancato! Ma se vado a vedere nelle statistiche di accesso al blog (che probabilmente non è un sito di riferimento per i visitatori attenti alla sicurezza informatica) nell'ultimo mese: il 33% usa IE, il 28% FF, il 23% Chrome, il 10% Safari e il resto mancia.
RispondiEliminaSe prendo scompongo il 33% dei visitatori che usa IE ho questa distribuzione: 54% versione 8, 29% versione 9, e 13% versione 7.
Se prendo il 28% dei FF: oltre il 71% usa versione >= 8.
Se prendo il 23% di Chrome: oltre il 90% usa versione >= 15.
Mi da come l'impressione che gli utenti FF/Chrome abbiano la tendenza a tenersi aggiornati, cosa contraria a quelli di IE che però sono la fetta più larga.
Io ho una certa repulsione ad IE, e lo uso solo per verificare che le pagine che preparo si vedano decentemente. Se fosse per me lo eliminerei, ma vista la frazione di visitatori non si può fare!
Tu che browser usi?
Io che lo faccio di lavoro (realizzare siti intendo) uso ovviamente tutti i browser per i test ma il mio preferito e chrome, piu' che altro per la velocità di caricamento, la snellezza, e la velocità dell'interprete javascript.
RispondiEliminaChrome attualmente è il migliore a livello di compatibilità.
Chrome sta mangiando quote di mercato a tutti. IE, ma anche FF sono in netto calo. In leggera crescita Safari.
questo grafico è eloquente: http://en.wikipedia.org/wiki/File:Usage_share_of_web_browsers_(Source_StatCounter).svg
(fatto tra l'altro in SVG)
Anche io ho fatto questa analisi su un sito con circa 40.000 accessi univoci al giorno e le statistiche sono abbastanza in linea con le tue.
C'è un preoccupante utilizzo di IE 6, che sopravvive nonostante le campagne fatte per il suo aggiornamento.
Chrome è sempre molto aggiornato perchè c'è un modalità automatica di aggironamento del browser, ed inoltre ogni 6 settimane escono con una versione nuova.
Fino ad un mese e mezzo fa ero un felice utilizzatore di Firefox convinto che non ci fosse niente di meglio. E usavo gli altri (IE e Chrome) solo per verifiche di compatibilità. Per provare sono passato a Chrome e mi sto rendendo conto che è veramente più veloce degli altri.
RispondiElimina40mila accessi univoci al giorno sono parecchi di più quelli che arrivano qui, ma vedo dal grafico che a livello di percentuali siamo piuttosto in linea, anzi forse i nostri visitatori IE sono persino meno. Impressionante è il fatto che il 10% delle nostre visite arrivi da dispositivi mobili.
Terrò a mente la tua professione, qualora avessimo bisogno di un valido consiglio!
Il grafico è tratto da wikipedia con dati ufficiali credo del w3c.
RispondiElimina