La maggior parte delle immagini possono collegarsi solo a una singola pagina web. Creazione di una mappa immagine cliccabile consente una singola immagine per collegare a più pagine. Una mappa immagine rompe una singola immagine in regioni, che sono conosciute come punti caldi. Ogni hot spot in grado di collegarsi a una pagina Web diversa o sezione di una pagina web. È possibile creare una semplice mappa cliccabile utilizzando semplici software di grafica e comandi HTML di base in pochi minuti. Creazione di una mappa immagine con molti punti caldi, tuttavia, può richiedere molto tempo, come ogni regione deve essere definito da sola.

istruzione

immagine Definizione

1 Scegli un'immagine che non confondere i tuoi visitatori del sito web. Utilizzare solo immagini per le mappe cliccabili che hanno componenti distinte. Evitare di fotografie in cui le regioni si fondono insieme e non sono ben definiti. Utilizzare un software di editing grafico per affinare i colori e scurire i bordi regione per migliorare la chiarezza dell'immagine.

2 Salvare l'immagine in formato GIF o JPEG; questi sono gli unici formati che è possibile utilizzare con l'HTML.

3 Trova le coordinate immagine per ciascuna regione. L'immagine coordinata è una coppia di numeri separati da una virgola che rappresenta la posizione esatta di un punto su un'immagine. Utilizzare qualsiasi software di grafica semplice per trovare le coordinate. Eseguire il mouse sull'immagine e guardare la parte inferiore dello schermo. Le coordinate sono le coppie di numeri che cambiano quando si sposta il mouse.

4 Creare punti caldi della mappa immagine basate su coordinate regione. È possibile creare aree mappa cliccabile che sono rettangolare, circolare o poligonale.

Per creare un hot spot di forma rettangolare, trovare le migliori coordinate angolo a sinistra e poi le coordinate in basso a destra della regione. coordinate cartesiane dovrebbero seguire questo formato: 110.124.200.190.
I primi due coordinate corrispondono alto a sinistra e gli ultimi due corrispondono basso a destra.

Per creare un hot spot circolare, trovare la coordinata del centro del cerchio. È inoltre necessario per calcolare il raggio del cerchio, che è la distanza dal centro del cerchio a qualsiasi punto sul cerchio. coordinate circolari devono utilizzare questo formato: 185,496,43. I primi due numeri corrispondono alle coordinate del centro del cerchio e l'ultimo numero corrisponde con il raggio.

Per creare un hot spot poligono, elencare tutte le coordinate dei punti regione in ordine. Utilizzare punti caldi poligonali quando la regione è qualsiasi forma diversa dalla circolare o rettangolare. hot spot poligono avranno il seguente formato: 56,67,60,78,70,62. In questo esempio, il poligono è un triangolo. I primi due numeri coincidono con le coordinate del primo punto sul triangolo; il secondo set corrisponde con il secondo punto e gli ultimi due numeri corrisponde con terzo punto del triangolo. Scegliere qualsiasi punto per iniziare e seguire i punti in ordine.

Creare una marcatura giù coordinate di tutti i punti caldi di immagine per riferimento nella Fase due della Sezione Due grafico.

Codifica HTML

5 Lascia la tua immagine mappa un nome.
Digitare il seguente comando nel vostro editor HTML:
<Map name = "map-name">
(Posto nell'area tag qui)
</ Map>
Sostituire le parole "mappa-name" con qualsiasi nome che si sceglie che rappresenterà la mappa immagine. Si noti che questo non è il nome della vostra immagine, che è stata definita nel software di grafica. Questo è il nome della mappa creata da tale immagine.

6 Inserire i tag zona tra il <map name = "map-name"> e </ map> al punto uno dei due sezione.

Utilizzare la seguente sintassi per definire la forma, coordinate e destinazione del collegamento di un hot spot:
<Area shape = "forma" coords = "Inserisci le coordinate qui" href = "webpage.html">

Sostituire la parola "forma" con il "cerchio" valori "rect" e "poli" per rappresentare le regioni circolare, rettangolare e poligonale a forma di conseguenza.

Sostituire le parole "inserire le coordinate qui" con i valori delle coordinate trovato nel passaggio Quattro di Sezione Uno.

Sostituire la parola "webpage.html" con la pagina web che si desidera l'hotspot a cui collegarsi.

Inserire una riga di comando un'area separata per ogni hot spot che si desidera creare.

7 Inserire la mappa immagine sulla pagina web utilizzando il comando screen immagine.
Utilizzare la seguente sintassi: <img usemap = "# map-name">

Sostituire la parola "image.gif" con il nome dell'immagine definita nella Fase due della Sezione Uno. Sostituire la parola "mappa-nome" con il nome della mappa immagine definita nella Fase Uno di Sezione Seconda, ma non rimuovere il simbolo cancelletto (#).

Il codice completato dovrebbe seguire questo formato:
<Map name = "map-name">
<area shape = coordinate "rect" = "135.180.200.185" href = "webpage1.html">
<area shape = "cerchio" coords = "49,300,42" href = "webpage2.html">
<area shape = "Poly" coords = "24,35,55,20,90,42,91,80,60,105" href = "webpage3.html">
</ Map>
<Img usemap = "# map-name">