Ricerca…


Sintassi

  • <img usemap="#[map-name]">
  • <map name="[map-name]"></map>
  • <area>

Parametri

Tag / Attributo Valore
<img> Di seguito sono riportati gli attributi specifici della mappa immagine da utilizzare con <img> . Si applicano gli attributi <img> regolari.
usemap Il name della mappa con un simbolo di hash è stato aggiunto ad esso. Ad esempio, per una mappa con name="map" , l'immagine dovrebbe avere usemap="#map" .
<map>
name Il nome della mappa per identificarlo. Da utilizzare con l'attributo usemap dell'immagine.
<area> Di seguito sono riportati gli attributi specifici <area> . Quando href è specificato, rendendo <area> un link, <area> supporta anche tutti gli attributi del tag anchor ( <a> ) tranne ping . Guardali ai documenti MDN .
alt Il testo alternativo da visualizzare se le immagini non sono supportate. Questo è necessario solo se href è impostato anche su <area> .
coords Le coordinate che delineano l'area selezionabile. Quando shape="polygon" , questo dovrebbe essere impostato su un elenco di coppie "x, y" separate da virgole (cioè, shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ). Quando shape="rectangle" , questo deve essere impostato a left, top, right, bottom . Quando shape="circle" , questo deve essere impostato su centerX, centerY, radius .
href L'URL del collegamento ipertestuale, se specificato. Se viene omesso, allora <area> non rappresenterà un collegamento ipertestuale.
shape La forma di <area> . Può essere impostato default per selezionare l'intera immagine (non coords attributo necessario), circle o circ per un cerchio, rectangle o rect per un rettangolo e polygon o poly per un'area poligonale specificata da punti d'angolo.

Osservazioni

  • L'elenco dei parametri sopra è modificato dai documenti MDN: <map> e <area> .

  • È possibile creare le coordinate di una mappa immagine per un'immagine con forme più semplici (come nell'esempio introduttivo sopra) con un editor di immagini che mostra le coordinate (come GIMP). Tuttavia, potrebbe essere più semplice in generale utilizzare un generatore di mappe di immagini, come questo .

Introduzione alle mappe di immagini

Descrizione

Una mappa immagine è un'immagine con aree selezionabili che di solito fungono da collegamenti ipertestuali.

L'immagine è definita dal tag <img> e la mappa è definita da un tag <map> con tag <area> per indicare ciascuna area cliccabile. Utilizza la usemap del usemap e gli attributi del name per associare l'immagine e la mappa.


Esempio di base

Per creare una mappa immagine in modo che ciascuna delle forme nell'immagine sottostante sia selezionabile:

triangolo, quadrato, immagine del cerchio

Il codice sarebbe il seguente:

<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
    <area shape="polygon" coords="79,6,5,134,153,134">
    <area shape="rectangle" coords="177,6,306,134">
    <area shape="circle" coords="397,71,65">
</map>

Dovresti vedere che il browser riconosce le aree quando il cursore diventa un puntatore. Guarda una demo dal vivo su JSFiddle o guarda una dimostrazione qui sotto:

dimostrazione di mappa immagine e cursore



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow