Durante la creazione di mappe, cartografi utilizzano coordinate per identificare specifiche posizioni su una mappa. I matematici inoltre utilizzano coordinate per definire "x," punti "y" e "z" su una griglia. Gli sviluppatori Web utilizzano le coordinate per creare mappe di immagine HTML interattive e migliorare l'esperienza di navigazione. Utilizzando una mappa immagine, è possibile definire i punti caldi su una foto. Quando l'utente seleziona un'area sulla foto, la mappa immagine eseguirà un'azione come apertura di un sito Web o un pop-up.
Istruzioni
1
Avviare l'editor HTML o blocco note. Aprire uno dei file HTML.
2
Aggiungere questo codice alla sezione "< body >" del documento:
< img alt = "immagine" usemap = "#mapTest" / >
< nome mappa = "mapTest" >
La prima riga aggiunge un'immagine alla tua pagina. Modificare "xyz.jpg" con il nome di un'immagine sul disco rigido. La proprietà "usemap" definisce una mappa immagine denominata "mapTest." La riga successiva crea la mappa immagine. Suo nome, "mapTest," corrisponde al nome nella proprietà "usemap".
3
Aggiungere questo codice sotto il codice nel passaggio precedente:
< forma dell'area = "rect" coords = le href="xyz.com"144,10,237,82"" / >
Si tratta di un tag "< area >". Il parametro "nome" è il nome della mappa immagine. È possibile chiamare questo tutto ciò che ti piace. Il parametro "forma" definisce la forma di questa porzione dell'immagine. Le forme possibili sono "rect", "cerchio" e "poli". In questo esempio, la forma è un rettangolo con le coordinate a 144, 10, 237 e 82.
4
Sostituire "il xyz.com" con il nome del sito che si desidera aprire quando un utente fa clic sull'area della foto. Per esempio, sostituire "il xyz.com" con "l'http://www.google.com" Se si desidera che il browser aprire il sito Web di Google quando si fa clic su questa area rettangolare dell'immagine.
5
Aggiungere questo codice sotto il tag "< area >" precedente:
< forma dell'area = "cerchio" coords = le href="xyz.com"90,58,3"" / >
Questo definisce un'area circolare con centro a "90" e "58." Il suo raggio è "3". Sostituire "il xyz.com" con il nome di un URL valido.
6
Aggiungere questo codice sotto il tag "< area >" precedente:
< forma dell'area = "poli" coords = le href="xyz.com"10,25,55,74,120"" / >
< / mappa >
Questo definisce un poligono irregolare con le coordinate nelle posizioni indicate. Sostituire "il xyz.com" con il nome di un URL valido. Il tag "< / map >" termina la definizione di mappa immagine. L'esempio completo è simile al seguente:
< img alt = "immagine" usemap = "#mapTest" / >
< nome mappa = "mapTest" >
< forma dell'area = "rect" coords = le href="xyz.com"144,10,237,82"" / >
< forma dell'area = "cerchio" coords = le href="xyz.com"90,58,3"" / >
< forma dell'area = "poli" coords = href="xyz.com a"10, 25, 55, 74, 120"" / >
< / mappa >
7
Salvare il file HTML e visualizzarlo nel browser. Come si posiziona il cursore sulle posizioni di punto caldo, si trasforma in un puntatore.
8
Fare clic sull'immagine hot spot. Il browser si aprirà il sito che definito per quell'area dell'immagine.
Consigli & Avvertenze
- Per ottenere le coordinate di un'immagine, utilizzare un programma di fotoritocco come ad esempio Microsoft Paint o Photoshop.