Quando si pensa di mappe online la prima cosa che viene in mente è GoogleMaps. Tecnologia di mappatura di Google ha reso facile trovare qualsiasi punto nel globo. Con HTML e CSS è possibile creare un simile statico mappatura esperienza. Questa guida vi aiuterà a creare i CSS e il codice HTML necessario per creare una mappa statica che è possibile utilizzare per scopi personali o didattici.

Creazione del contenitore di mappa

Creare il contenitore per tenere premuta la mappa. Il CSS per il vostro contenitore avrà un'immagine di sfondo che sarà l'URL dell'immagine della mappa (vale a dire, "url (map. jpg)"), l'altezza e la larghezza in pixel, insieme al "parente" di posizione e visualizzare insieme per "bloccare". Posizionare questo contenitore nell'area del contenuto principale della pagina in qualsiasi punto tra il tag di apertura e di chiusura corpo.

Liste di definizioni

Creare un elenco di definizioni. Liste di definizione sono simili a elenchi non ordinati in quanto è possibile utilizzarli per visualizzare elenchi di dati; la differenza è che gli elenchi di definizione vengono utilizzati per creare informazioni che contiene sezioni (cioè, titoli e descrizioni, intestazioni e informazioni relative al contenuto, ecc.). Liste di definizioni notated con tag < DL > e possono contenere tag < DT > o < DD > Tag.

Definizione dei dati

Creare dati di definizione per l'elenco. Utilizzare < DD > Tag per notare i punti sulla mappa che si desidera creare. Assegnare una lingua al < DD >. Non c'è nessuna speciale CSS necessari per questi tag < DD >.

Creazione di punti di mappa

Creare collegamenti ipertestuali all'interno di ogni tag di definizione dati. All'interno di ogni < DD > inserire un collegamento ipertestuale. Il CSS per il collegamento ipertestuale può assumere una forma grafica, o una forma di testo. Il CSS per una forma grafica avrà la seguente struttura: immagine di sfondo dell'immagine punto mappa, altezza e larghezza del punto sulla mappa, blocco schermo, posizionamento assoluto, coordinate sinistra e superiore e ordine z-index. Il CSS per il collegamento ipertestuale testo dovrebbe includere testo-decorazione impostato su "none", display impostato su "inline", posizione insieme a "assoluto," z-index impostato su un valore integer maggiore di zero, colore del testo impostato su un valore esadecimale (cioè, "#333333") e font-size impostato su un valore in pixel (cioè, "12px").

Fare mappa punta dinamica

Utilizzare JavaScript per mostrare e nascondere i punti di mappa. Impostare i collegamenti ipertestuali CSS per essere invisibile impostando l'attributo di visibilità su "hidden". All'interno di un file JS separato scrivere una funzione che attiva o disattiva la classe di ciascun collegamento ipertestuale quando cliccato. Definire il CSS per la classe visibile impostando l'attributo di visibilità al "visibile". Verificare questa funzionalità JS cliccando su alcuni punti della mappa e si dovrebbero vedere i punti di mappa creata. Facendo clic nuovamente dovrebbe nascondere il punto della mappa.