15.1 – Mappe immagini HTML

Con le mappe di immagine HTML, è possibile creare aree selezionabili su un’immagine.

Mappe immagine

Il tag HTML definisce una mappa immagine.
Una mappa immagine è un’immagine con aree cliccabili.
Le aree sono definite con uno o più tag <map> <area>.

Prova a fare clic sul computer, sul telefono o sulla tazza di caffè nell’immagine qui sotto:

Esempio

Ecco il codice sorgente HTML per la mappa immagine sopra:

pizza al forno Pizza Brace
<img src="pizza-al-forno.jpg" alt="Piza al forno" usemap="#pizza-al-forno">

<map name="pizza-al-forno">
  <area shape="rect" coords="34,44,270,350" alt="Pizza" href="#pizza">
  <area shape="rect" coords="290,172,333,250" alt="Brace" href="#brace">
</map>

Come funziona?

L’idea alla base di una mappa immagine è che dovresti essere in grado di eseguire diverse azioni a seconda di dove fai clic nell’immagine.
Per creare una mappa immagine è necessaria un’immagine e del codice HTML che descriva le aree cliccabili.

L’immagine

L’immagine viene inserita utilizzando il tag.
L’unica differenza rispetto alle altre immagini è che devi Aggiungi un attributo: <img> usemap

<img src="pizza-al-forno.jpg" alt="Pizza al forno" usemap="#pizza-al-forno">

Il valore inizia con un tag hash seguito dal nome della mappa immagine e viene utilizzato per creare una relazione tra l’immagine e la mappa immagine usemap #.
Mancia: Puoi usare qualsiasi immagine come mappa immagine!

Crea mappa immagine

Quindi, aggiungi un elemento <map>.
L’elemento viene utilizzato per creare una mappa immagine ed è collegato all’immagine utilizzando il comando Attributo obbligatorio: <map> name

<map name="pizza-al-forno">

L’attributo deve avere lo stesso valore dell’attributo ‘s .name<img>usemap


Le Aree

Quindi, aggiungi le aree cliccabili.
Un’area selezionabile viene definita utilizzando un elemento.<area>

Forma

È necessario definire la forma dell’area cliccabile e scegliere una di queste valori:

  • rect – definisce una regione rettangolare
  • circle – definisce una regione circolare
  • poly – definisce una regione poligonale
  • default – definisce l’intera regione

È inoltre necessario definire alcune coordinate per poter posizionare l’area cliccabile su l’immagine.


Shape=”rect”

Le coordinate per venire in coppia, una per l’asse x e una per l’asse y.shape="rect"
Quindi, le coordinate si trovano a 34 pixel dal margine sinistro e 44 pixel dall’alto:34,44
Le coordinate si trovano 270 pixel dal margine sinistro e 350 pixel dall’alto:270,350
Ora abbiamo abbastanza dati per creare un’area rettangolare cliccabile:

Esempio

<area shape="rect" coords="34, 44, 270, 350" href="pizza.hmtl">

Questa è l’area che diventa cliccabile e invierà l’utente alla pagina “computer.htm”:

Shape=”cerchio”

Per aggiungere un’area circolare, individua innanzitutto le coordinate del centro del cerchio: 337,300
Quindi specificare il raggio del cerchio: 44 Pixel
Ora hai dati sufficienti per creare un’area circolare cliccabile:

Esempio

<area shape="circle" coords="337, 300, 44" href="forno.html">

Questa è l’area che diventa cliccabile e invierà l’utente alla pagina “caffè.htm”:

Shape=”poly”

Il contiene diverse coordinate punti, che crea una forma formata con linee rette (un poligono).shape="poly"
Questo può essere usato per creare qualsiasi forma.
Come forse una forma di croissant!
Come possiamo fare in modo che il croissant nell’immagine qui sotto diventi un link cliccabile?
Dobbiamo trovare le coordinate x e y per tutti gli spigoli del cornetto:
Le coordinate sono disponibili a coppie, una per l’asse x e una per l’asse y:

Esempio

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

Questa è l’area che diventa cliccabile e invierà l’utente alla pagina “croissant.htm”:

Mappa immagine e JavaScript

Un’area cliccabile può anche attivare una funzione JavaScript.
Aggiungere un evento all’elemento per eseguire una funzione JavaScript : click <area>

Esempio

Qui, usiamo l’attributo onclick per eseguire una funzione JavaScript quando il area è cliccato:

<map name="pizza-al-forno">
  <area shape="circle" coords="337,300,44" href="brace.html" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("Hai cliccato sulla brace!");
}
</script>

Sommario del capitolo

  • Utilizzare l’elemento HTML per definire una mappa immagine<map>
  • Utilizzare l’elemento HTML per definire le aree selezionabili nella mappa immagine<area>
  • Utilizzare l’attributo HTML dell’elemento per puntare a una mappa immagineusemap<img>

Tag immagine HTML

TagDescrizione
<img>Defines an image
<map>Defines an image map
<area>Defines a clickable area inside an image map
<picture>Defines a container for multiple image resources
Tabella immagini e mappe immagini HTML

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.