Attributo usemap dell'elemento HTML <img>

Tag HTML <img>

Definizione e uso

usemap Attributo definisce l'immagine come una mappa di immagini client-side.

Mappa di immagini si riferisce a un'immagine con aree cliccabili.

usemap Attributo associato a Elemento <map> associati all'attributo name o id per stabilire una relazione tra <img> e <map>.

Attenzione:Non può essere utilizzato se l'elemento <img> è un discendente dell'elemento <a> o <button>. usemap Proprietà.

Leggi di più: Spiegazione dettagliata dell'attributo usemap

Esempio

Mappa di immagini con aree cliccabili:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Phone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Cup of coffee" href="coffee.html">
</map>

Prova tu stesso

Sintassi

<img usemap="#mapname">

Valore dell'attributo

Valore Descrizione
#mapname Il carattere numero ("#") più il nome dell'elemento <map> da utilizzare.

Leggi di più: Spiegazione dettagliata dell'attributo usemap

usemap Le proprietà forniscono un meccanismo di mappatura delle immagini "client-side", che elimina efficacemente la gestione dei coordinate del mouse sul server e i problemi di ritardo di rete che ne derivano. Attraverso i tag speciali <map> e <area>, gli autori HTML possono fornire una mappatura che descrive le coordinate delle aree sensibili ai collegamenti dell'immagine usemap, inclusi gli URL dei collegamenti corrispondenti. Il valore dell'attributo usemap è un URL che punta a una regione speciale <map>. Il browser sul computer dell'utente trasformerà le coordinate del clic del mouse sull'immagine in un comportamento specifico, incluso il caricamento e la visualizzazione di un altro documento.

Eseguiamo un esempio di spiegazione. Il seguente codice sorgente mappa un'immagine di 100x100 pixel map.gif in 4 aree. Quando l'utente clicca su una di queste aree, viene reindirizzato a documenti diversi. Si prega di notare che in questo tag <img> abbiamo già incluso efficacemente la gestione della mappatura delle immagini ismap, in modo che gli utenti dei browser che non dispongono della funzione usemap possano gestire la mappatura delle immagini attraverso un altro mezzo, ovvero il meccanismo di server:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Differenze nell'applicazione delle proprietà ismap e usemap

La mappa è un esempio ottimo dell'applicazione delle proprietà ismap e usemap, ad esempio, durante la navigazione del sito web di una grande azienda a livello nazionale, gli utenti potrebbero fare clic sulla città in cui vivono sulla mappa per ottenere indirizzi e numeri di telefono di negozi al dettaglio nelle vicinanze.

I vantaggi del client usemap per la gestione delle mappe immagine è che non richiede un server o software server speciale, diversamente dal meccanismo ismap, può essere utilizzato in ambienti non web (senza rete), ad esempio, l'uso di file locali o CD-ROM.

Supporto dei browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto

Tag HTML <img>