Esercitazione HTML

HTML HOME Introduzione all'HTML Editor HTML HTML di base Elementi HTML Attributi HTML Intestazioni HTML Paragrafi HTML Stili HTML Formattazione HTML Citazioni HTML Commenti HTML Colori HTML CSS HTML Collegamenti HTML Immagini HTML Favicon HTML Tabelle HTML Elenchi HTML Blocco HTML e in linea Classi HTML ID HTML Iframe HTML JavaScript HTML Percorsi di file HTML Testa HTML Layout HTML HTML reattivo Codice informatico HTML Semantica HTML Guida allo stile HTML Entità HTML Simboli HTML Emoji HTML Set di caratteri HTML Codifica URL HTML HTML e XHTML

Moduli HTML

Moduli HTML Attributi del modulo HTML Elementi del modulo HTML Tipi di input HTML Attributi di input HTML Attributi del modulo di input HTML

Grafica HTML

Tela HTML HTML SVG

Supporto HTML

Supporto HTML Video HTML Audio HTML Plug-in HTML YouTube HTML

API HTML

Geolocalizzazione HTML Trascina/rilascia HTML Archiviazione Web HTML Lavoratori Web HTML HTML SSE

Esempi HTML

Esempi HTML Quiz HTML Esercizi HTML Certificato HTML Riepilogo HTML Accessibilità HTML

Riferimenti HTML

Elenco tag HTML Attributi HTML Attributi globali HTML Supporto browser HTML Eventi HTML Colori HTML Tela HTML Audio/video HTML Tipi di documenti HTML Set di caratteri HTML Codifica URL HTML Codici HTML Lang Messaggi HTTP Metodi HTTP Convertitore da PX a EM Tasti rapidi

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:

Posto di lavoro Sun Mercury Venus

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 usemapattributo:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Il usemapvalore 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' nameattributo 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 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 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,44si trovano a 34 pixel dal margine sinistro e 44 pixel dall'alto:

Posto di lavoro

Le coordinate 270,350si trovano a 270 pixel dal margine sinistro e a 350 pixel dall'alto:

Posto di lavoro

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":

Posto di lavoro

Forma="cerchio"

Per aggiungere un'area del cerchio, individua prima le coordinate del centro del cerchio:

337,300

Posto di lavoro

Quindi specificare il raggio del cerchio:

44 pixel

Posto di lavoro

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":

Posto di lavoro

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?

Cibo francese

Dobbiamo trovare le coordinate xey per tutti i bordi del croissant:

Cibo francese

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":

Cibo francese

Mappa immagine e JavaScript

Un'area selezionabile può anche attivare una funzione JavaScript.

Aggiungi un clickevento <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
  • usemapUtilizzare 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 .