Nwlapcug.com


Come creare una mappa immagine con HTML

Come creare una mappa immagine con HTML


Una mappa immagine è un insieme di coordinate che divide l'immagine in più aree "cliccabili" che collegano ad altre pagine web o siti web. Se si dispone di un'immagine o con diverse sezioni, è possibile utilizzare mappe immagine per aggiungere alcuni tocchi unici al tuo sito web. Essi sono comunemente utilizzati come forma di navigazione web, permettendo ai visitatori di cliccare sui diversi link sull'immagine al fine di raggiungere un'altra parte del sito. Mappe immagine sono semplici da creare per quelli con conoscenze di base di HTML e non richiedono alcuna speciale script o programmi per implementare.

Istruzioni

1

Selezionare l'immagine che si desidera utilizzare come immagine di sfondo per la mappa immagine. Grafica con diverse aree di forma o colore che sono facili per i visitatori di distinguere è più adatti per creare mappe di immagini. Fotografie non sono raccomandati.

2

Selezionare le diverse aree che si desidera avere collegati ad altre pagine del tuo sito web o altrove sul web. Ci sono tre tipi di aree, è possibile utilizzare come link sulla tua mappa immagine: RECT, cerchio e poligono. Inoltre, non esiste alcun limite per quanto riguarda la quantità di collegamenti che è possibile aggiungere alla tua mappa immagine HTML.

3

Apri la tua immagine in qualsiasi programma di editing al fine di determinare le coordinate di ogni zona che avete scelto per la mappa immagine. Microsoft Paint viene fornito con molti PC e può facilmente essere utilizzato per trovare le coordinate. Se le aree "cliccabili" sono di forma rettangolare, è solo necessario trovare le coordinate di sinistra superiore destro e inferiore. Per aree circolari, sono necessarie solo le coordinate del centro e la dimensione del raggio. Aree a forma poligonale hanno coordinate multiple, e sarà necessario elencarli in ordine. Annotare le coordinate della mappa immagine per una facile consultazione.

4

Inserire l'immagine nella pagina web aprendolo in un editor di testo (come blocco note) e digitando < IMG SRC = "URL" USEMAP = "#MAPNAME" >. Sostituire l'URL con la posizione della vostra immagine e MAPNAME con il nome della mappa che si desidera utilizzare (questo può essere qualsiasi cosa).

5

Creare la mappa immagine digitando < MAP NAME = "NOMEMAPPA" >. Si può dare la mappa qualsiasi nome che si desidera, purché corrisponda al nome indicato nell'immagine. Se non corrispondono i nomi sulla mappa e l'immagine, quindi la mappa immagine non funzionerà.

6

Dopo il codice della mappa, digitare < AREA forma = "forma" COORDS = "A, B, C, D" HREF = "URL" >. Sostituire la forma con la forma della vostra zona e inserire le coordinate della vostra zona al posto di A, B, C, D. Per esempio, una zona a forma rettangolare sarebbe < AREA SHAPE = "RECT" COORDS = "116,113,203,144" HREF = "URL" >. Sostituire l'URL con l'indirizzo URL della pagina che si desidera questa parte della vostra immagine a cui collegarsi.

7

Dopo aver digitato il codice HTML per tutte le aree della mappa immagine, chiudere la mappa digitando < / MAP > alla fine.

8

Aprire la pagina dove è stato inserito la mappa immagine nel browser web al fine di verificare che il codice HTML sia corretto e che l'immagine mappa opere. Voi ed i vostri ospiti possono ora fare clic su diverse aree di un'immagine e visitare altre aree del tuo sito.