Come fare un usemap in un div

December 28

Come fare un usemap in un div


Durante la posa fuori un sito web, molti sviluppatori utilizzano divisioni, o div, per posizionare i contenuti sulle loro pagine. Un altro metodo di layout, comunemente usato all'interno di una divisione, è una mappa immagine. mappe immagine creare aree di link cliccabile sulla cima di una immagine, che consente collegamenti per essere integrati in una struttura di pagina complessa. Utilizzando la mappa immagine all'interno di un div fornisce un'ampia controllo sulla posizione, l'aspetto e la funzione degli elementi del tuo sito.

istruzione

Creazione di una mappa immagine

1 Creare una mappa nell'intestazione HTML usando il tag "<map>". Dare la mappa un nome univoco e ID. Ad esempio, se la mappa è un menu di navigazione, la mappa tag di apertura può apparire come segue:

<Nome della mappa = "navigazione" id = "navigazione">

2 Aggiungere un collegamento mappato mediante la creazione di un "<area>" tag. Un'area contiene un link, denominazione forma e coordina per definire la forma, un ID di riferimento per le altre parti del sito web e testo alternativo per gli utenti con il software text-to-speech. Per creare una zona a forma di un rettangolo che è largo 100 pixel, 50 pixel di altezza e si trova nell'angolo in alto a sinistra dell'immagine, aggiungere:

<Area href = "http://www.linkedwebsite.com" Forma = coordinate "rect" = "0, 0, 100, 50" id = "link1" alt = "sito web collegato" />

3 Aggiungere ogni necessario collegamento mappato, quindi terminare la mappa aggiungendo "</ map>" dopo l'ultimo anello.

USEMAP in un div

4 Inserire l'immagine che si è creato per la mappa all'interno della divisione per la creazione di un tag "<img />" tra le "<div>" e "</ div>" tag. Il backslash dice al browser che, dopo il contenuto di questo tag, è finito in fase di creazione dell'immagine.

5 Aggiungere una posizione di origine per l'immagine e il testo alternativo per l'uso con il software text-to-speech. Per esempio:

<Img src = "images / imagemaplocation.jpg" alt = "immagine menu di navigazione" />

Questo dice il sito web che l'immagine si trova nella cartella "immagini" del tuo sito web directory e chiamato "imagemaplocation.jpg." Quando un visitatore raggiunge il vostro sito utilizzando un'applicazione text-to-speech, il visitatore deve essere in grado di trovare l'immagine dalla descrizione alternativa di "immagine menu di navigazione."

6 Inserire il comando "usemap" prima della parentesi dell'immagine di chiusura, assicurandosi che è uguale al nome della mappa è stata creata con un hashtag, o cancelletto, davanti al nome. Ad esempio, per applicare la mappa dei menu di navigazione, aggiungere:

usemap = "#navigation"

7 Salvare il sito locale e caricare il nuovo contenuto al server per applicare le modifiche on-line.

Consigli e avvertenze

  • aree della mappa immagine può inoltre essere formati in un cerchio con i punti di definizione è il punto centrale e il raggio o un poligono con più punti di coordinate per definire la forma.

Articoli Correlati