Mappe di immagini HTML
Con le mappe immagine HTML, puoi creare aree cliccabili su un'immagine.
Mappe di immagini
Il <map>
tag HTML definisce una mappa immagine. Una mappa immagine è un'immagine con aree selezionabili. Le aree sono definite con uno o più <area>
tag.
Prova a fare clic sul computer, sul telefono o sulla tazza di caffè nell'immagine seguente:
Esempio
Ecco il codice sorgente HTML per la mappa dell'immagine sopra:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
Come funziona?
L'idea alla base di una mappa di immagini è che dovresti essere in grado di eseguire azioni diverse a seconda di dove fai clic sull'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 <img>
tag. L'unica differenza rispetto alle altre immagini è che devi aggiungere un usemap
attributo:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Il usemap
valore inizia con un hash tag
#
seguito dal nome della mappa immagine e viene utilizzato per creare una relazione tra l'immagine e la mappa immagine.
Suggerimento: puoi utilizzare qualsiasi immagine come mappa immagine!
Crea mappa immagine
Quindi, aggiungi un <map>
elemento.
L' <map>
elemento viene utilizzato per creare una mappa immagine ed è collegato all'immagine utilizzando l' name
attributo richiesto:
<map name="workmap">
L' name
attributo deve avere lo stesso valore
dell'attributo <img>
.usemap
Le Aree
Quindi, aggiungi le aree cliccabili.
Un'area selezionabile viene definita utilizzando un <area>
elemento.
Forma
È necessario definire la forma dell'area selezionabile e scegliere uno di questi valori:
rect
- definisce una regione rettangolarecircle
- definisce una regione circolarepoly
- definisce una regione poligonaledefault
- definisce l'intera regione
È inoltre necessario definire alcune coordinate per poter posizionare l'area selezionabile sull'immagine.
Forma = "retto"
Le coordinate per shape="rect"
sono a coppie, una per l'asse x e una per l'asse y.
Quindi, le coordinate 34,44
si trovano a 34 pixel dal margine sinistro e 44 pixel dall'alto:
Le coordinate 270,350
si trovano a 270 pixel dal margine sinistro e a 350 pixel dall'alto:
Ora abbiamo dati sufficienti per creare un'area rettangolare cliccabile:
Esempio
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Questa è l'area che diventa cliccabile e rimanda l'utente alla pagina "computer.htm":
Forma="cerchio"
Per aggiungere un'area del cerchio, individua prima le coordinate del centro del cerchio:
337,300
Quindi specificare il raggio del cerchio:
44
pixel
Ora hai abbastanza dati per creare un'area circolare cliccabile:
Esempio
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Questa è l'area che diventa cliccabile e rimanda l'utente alla pagina "coffee.htm":
Forma = "poli"
Contiene diversi punti di shape="poly"
coordinate, che creano una forma formata con linee rette (un poligono).
Questo può essere utilizzato 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 xey per tutti i bordi del croissant:
Le coordinate sono 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 rimanda l'utente alla pagina "croissant.htm":
Mappa immagine e JavaScript
Un'area selezionabile può anche attivare una funzione JavaScript.
Aggiungi un click
evento <area>
all'elemento per eseguire una funzione JavaScript:
Esempio
Qui, utilizziamo l'attributo onclick per eseguire una funzione JavaScript quando si fa clic sull'area:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Riassunto capitolo
- Utilizzare l'elemento HTML
<map>
per definire una mappa immagine - Utilizzare l'
<area>
elemento HTML per definire le aree selezionabili nella mappa immagine usemap
Utilizzare l' attributo HTML<img>
dell'elemento per puntare a una mappa immagine
Tag immagine HTML
Tag | Description |
---|---|
<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 |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .