HTML Image mappatura Tutorial

November 16

mappatura delle immagini è il processo di trasformare una parte di un'immagine in un collegamento web attiva. Mentre siti come Facebook utilizzano Java script per fare questo, i link alle immagini di mappatura può essere fatto tramite il codice HTML. Ci vorrà pratica per padroneggiare, e si può trovare a dover un momento difficile collocare i link in un primo momento, ma con una certa esperienza è possibile trasformare qualsiasi immagine in una directory di link per i visitatori del sito di godere.

Selezionare l'immagine

Mentre è possibile tecnicamente utilizzare qualsiasi immagine che si desidera, si consiglia di utilizzare un'immagine che ha simboli identificabili che possono essere utilizzati come marcatori per il vostro link. Indipendentemente l'immagine che si sceglie di utilizzare, assicurarsi che sia caricato sul server in modo che si può vedere e controllare i tuoi progressi, come si tenta di mappare esso.

Determinare coordinate immagine

Una volta che avete la vostra immagine selezionata, è necessario indicare le aree che si intende mappare collegamenti a. Questo può essere fatto in tre modi. Per creare aree rettangolari, si ha bisogno delle coordinate degli angoli in alto a sinistra e in basso a destra della casella. aree circolari richiedono di dare la dimensione del raggio e il punto che servirà come il centro del cerchio di coordinate. aree poligonali vi richiederanno di avere le coordinate di ogni punto che si desidera avere forma la zona.

Come si ottiene le coordinate? Avrete bisogno di avere un programma di editing di immagini come Photoshop. Se il PC funziona su un sistema operativo Windows (il sistema operativo), è possibile utilizzare Microsoft Paint per trovare tutte le coordinate necessari per ogni immagine. Basta essere sicuri di scriverle per riferimento futuro.

Codice dell'immagine

Una volta che avete l'immagine e le coordinate che si desidera utilizzare per mappare il vostro link, è possibile scrivere il codice. Ogni mappa immagine richiederà un nome. Un esempio di questo, in codice, sarebbe:

<Nome della mappa = "domanda">

"La domanda" è il nome della mappa. Da lì, si inserisce il codice per ciascuno dei collegamenti della mappa. Volgeranno lo sguardo come segue (poligonale utilizzato come esempio):

<Area shape = "Poligono" coords = "4, 8, 15, 16, 23, 42" href = "http://www.ehow.com" rel = "nofollow">

Potrai ripetere questo codice, cambiando le coordinate, se necessario, fino a quando è stata mappata l'immagine a proprio piacimento. Basta ricordare che una volta che hai finito la mappatura la vostra immagine, chiudere la mappa utilizzando il </ map> codice HTML.


Articoli Correlati