Html: immagini come link e mappe
- Maggio 29, 2011
- by
- Donatantonio
Nelle lezioni precedenti è stato analizzato e approfondito il concetto di collegamento ipertestuale e quindi la sintassi del tag <a>.
Fino a questo momento si è sempre utilizzato del semplice testo per evidenziare un link, ma è pratica comune nel mondo web rendere un’immagine, un logo o un’icona cliccabile.
Immaginiamo ad esempio ad un menu html, che a differenza di quello proposto in precedenza, proponga per ogni link un bottone sottoforma di immagine gif o png.
Realizzare un link mediante un’immagine consiste essenzialmente nell’annidare un tag <img> all’interno del tag <a>:
<a href=‘pagina.html’><img src=‘immagine.jpg’ /></a>
In linea generale potremo sostenere che tutto ciò che compare all’interno del tag <a> diventa in automatico cliccabile.
Il codice sottostante descrive l’utilizzo di un logo png come link:
<html>
<head>
<title>IMMAGINI COME LINK</title>
</head>
<body>
<div>Clicca sotto per accedere alla home : </div>
<p align='justify'>
<a href=‘home.html’><img src=‘home.png' align='left'/></a>
</p>
</body>
</html>
Di seguito è visibile il risultato nella finestra del browser, da notare che di default il browser applica un bordo blu ad indicare che l’immagine è un link.
Per rimuove il bordo è necessario semplicemente impostare l’attributo border=‘0’.
Le mappe.
Abbiamo visto che le immagini possono essere utilizzate come link con altre pagine di un sito web.
A volte è necessario far sì che solo una determinata parte di un’immagine sia collegata a un link. È il tipico caso delle Regioni d’Italia: abbiamo una cartina e abbiamo la necessità che alla sagoma di ciascuna regione corrisponda un differente collegamento.
La logica di una mappa html è quella di suddividere l’immagine in aree dette anche zone calde (hotspot) grazie alle quali, facendo clic su di esse, è possibile raggiungere le destinazioni dei link.
Per creare una mappa di immagine cliccabile dobbiamo utilizzare diversi comandi HTML che passiamo in rassegna:
- map genera la mappa con riferimento all’immagine da mappare;
- area genera le aree sensibili al click del mouse;
- img visualizza l’immagine da mappare, con riferimento alla mappa.
Ciascuno di questi tag ha come scopo finale quello di realizzare una mappa immagine.
Di seguito un esempio di codice html per la realizzazione di una mappa:
<map name="MiaMappa">
<area href="pag_1.html" shape="rect" coords="100, 200, 300, 400">
<area href="pag_2.html" shape="rect" coords="500, 600, 700, 800">
</map>
<img src="miafoto.jpg" usemap="#MiaMappa" border="0">
Analizzando nel dettaglio il codice proposto si può notare come la mappa sia contenuta all’interno del tag MAP a cui viene assegnato un nome tramite l’attributo name.
All’interno del MAP si trovano i tag AREA a cui vengono assegnati i seguenti attributi:
- href : riferimento al collegamento ipertestuale associato all’area;
- shape : descrive la forma dell’area e può assumere il valore rect, circle e polygon;
- coords : elenca le coordinate dell’area cliccabile, separate da virgole.
Infine al tag IMG viene associato l’attributo usemap (mappa da utilizzare) che accetta il nome della mappa preceduto dal cancelletto (#).
Il punto cruciale nella realizzazione di una mappa immagine è l’individuazione delle coordinate da assegnare alle varie aree. A tale scopo è necessario utilizzare appositi programmi di editing di immagini o in alternativa applicazioni che individuate le coordinate creano al volo il codice html da includere all’interno del tag MAP.
