HTML
Mappe di immagini
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:
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:
