Come creare una mappa immagine con HTML

November 12

Come creare una mappa immagine con HTML


Una mappa immagine è un insieme di coordinate che divide l'immagine in più aree "cliccabili" che puntano ad altre pagine web o siti web. Se si dispone di un elemento grafico o l'immagine con diverse sezioni, è possibile utilizzare mappe di immagini per aggiungere alcuni tocchi unici al tuo sito web. Sono comunemente usati come forma di navigazione web, consentendo ai visitatori di clic sui collegamenti differenti sull'immagine per vedere un'altra parte del sito. Le mappe immagine sono semplici da creare per le persone con conoscenze di base di HTML, e non richiedono alcun script o programmi speciali da attuare.

istruzione

1 Seleziona l'immagine che prevede di 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 sono più adatti per la creazione di mappe immagine. Le fotografie non sono raccomandati.

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

3 Aprite la vostra immagine in qualsiasi programma di editing al fine di determinare le coordinate di ogni area che avete scelto per la vostra mappa immagine. Microsoft Paint viene fornito con molti PC, e può essere facilmente utilizzato per trovare le coordinate. Se le aree "cliccabili" sono di forma rettangolare, avete solo bisogno di trovare le coordinate in basso a sinistra e in alto a destra. Per aree circolari, solo il centro coordina e sono necessari la dimensione del raggio. aree di forma poligonale hanno più coordinate, e sarà necessario elencarli in ordine. Annotare le coordinate della mappa immagine per una facile consultazione.

4 Inserire l'immagine sulla tua pagina web aprendolo in un editor di testo (ad esempio Blocco note) e digitando <IMG SRC = "URL" USEMAP = "# mapname">. Sostituire 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 = "mapname">. Si può dare la mappa qualsiasi nome che si desidera, a condizione che corrisponda al nome indicato sull'immagine. Se i nomi sulla mappa e l'immagine non corrispondono, allora la mappa immagine non funziona.

6 Dopo il codice carta, tipo <AREA SHAPE = "forma" COORDS = "A, B, C, D" HREF = "URL">. Sostituire forma con la forma della vostra zona, e inserire le coordinate della zona al posto di A, B, C, D. Per esempio, un'area di forma rettangolare sarebbe <AREA SHAPE = COORDS "RECT" = "116.113.203.144" HREF = "URL">. Sostituire URL con l'indirizzo URL della pagina che si desidera questa parte della tua immagine a cui collegarsi.

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

8 Aprire la pagina in cui si è inserito il mappa immagine nel tuo browser web, al fine di verificare che il codice HTML sia corretto e che la mappa immagine funziona. Tu ei tuoi visitatori ora possibile fare clic su diverse aree di un'immagine e di visitare altre aree del sito.