Quando si pensa di linea mappe la prima cosa che viene in mente è GoogleMaps. tecnologia di mappatura di Google ha reso più facile per trovare qualsiasi punto del globo. Con HTML e CSS è possibile creare una simile esperienza mapping statico. Questa guida vi aiuterà a creare il CSS e HTML necessari per creare una mappa statica che è possibile utilizzare per scopi personali o didattici.

Creazione del Map Container

Creare il contenitore per la mappa. Il CSS per il vostro contenitore avrà un background-image, che sarà l'URL dell'immagine della mappa (ad esempio, "url (map.jpg)"), l'altezza e la larghezza in pixel, posizione impostata su "relativa", e la visualizzazione set bloccare." Posizionare il contenitore nell'area del contenuto principale della pagina in qualsiasi punto tra il tag di apertura e chiusura del corpo.

liste Definizione

Creare un elenco di definizioni. Gli elenchi definizione sono simili a liste non ordinate in che si possono utilizzare per visualizzare elenchi di dati; la differenza è che le liste di definizione sono utilizzati per creare le informazioni che contiene sezioni (ad esempio, titoli e descrizioni, le intestazioni e le relative informazioni sul contenuto, etc.). Gli elenchi definizione sono annotati con i tag <dl> e possono contenere i tag <dt> o <DD> tag.

definizione dei dati

Creare dati di definizione per la lista. Utilizzare <DD> tag per notare i punti sulla mappa che si desidera creare. Assegnare un locale per <DD>. Non vi è alcuna speciale CSS necessario per questi tag <dd>.

Creazione Mappa Punti

All'interno di ogni variabile di dati definizione creare collegamenti ipertestuali. 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 della mappa punto dell'immagine, l'altezza e la larghezza del punto della mappa, visualizzazione blocco, posizionamento assoluto sfondo, coordinate sinistra e superiore, e l'ordine z-index. Il CSS per collegamento ipertestuale testo includerebbe text-decoration impostato su "Nessuno", esposizione impostato su "in linea", la posizione impostata su "assoluto," z-index è impostato su un numero intero maggiore di zero, il colore del testo impostato su un valore esadecimale (Es: "# 333333") e font-size impostato su un valore di pixel (vale a dire, "12px").

Rendere Mappa Punti dinamica

Utilizzare JavaScript per mostrare e nascondere i punti della mappa. Impostare i collegamenti ipertestuali CSS per essere invisibile impostando l'attributo visibilità "nascosta". All'interno di un file JS separata scrivere una funzione che attiva la classe di ogni collegamento ipertestuale quando si fa clic. Definire il CSS per la classe visibile impostando l'attributo visibilità su "visibile". Testare questa funzionalità JS cliccando su alcuni punti della mappa e si dovrebbe vedere i punti della mappa che hai creato. Cliccando nuovamente dovrebbe nascondere il punto della mappa.