Nwlapcug.com


Come modificare una mappa immagine in HTML a un codice CSS

Modificare una mappa immagine basati su HTML al codice CSS ti dà tutti i vantaggi di stile di CSS, ad esempio effetti librantesi e multi-layered. Una mappa di immagine CSS è un'immagine divisa in sezioni, ciascuno dei quali è il proprio hotspot cliccabili. Ogni sezione può avere individualizzato attributi CSS.

Istruzioni

1

Aprire il file di origine HTML in un editor di testo come blocco note di Windows e rimuovere qualsiasi codice di mappa immagine HTML esistente.

2

Aggiungere una divisione in cui si desidera la mappa immagine a comparire e assegnarle un ID aggiungendo il codice:

< div id = "my_image_map" >.

3

Creare un tag "a href" per ogni sezione della mappa immagine utilizzando il codice nel seguente formato:

< a href = "link_url1" id = "link1" >< /a >

Sostituire "link_url1" con il link per la sezione e "link1" con un id per tale sezione. Aggiungere "< / div >" dopo l'ultimo link.

Per esempio:

< a href = "il www.myserver.com/page1.html" id = "link1" >< /a >

< a href = "il www.myserver.com/page2.html" id = "link2" >< /a >

< a href = "il www.myserver.com/page3.html" id = "link3" >< /a >< / div >

Questo creerà tre sezioni con collegamenti all'interno dell'immagine, simulando un menu.

4

Aggiungere CSS per gestire l'immagine principale aggiungendo il seguente codice nella sezione "< head >" del file HTML:

< style type = "text/css" >

my_image_map {width: 600px; altezza: 600px; background:URL(my_image_file.gif) no-repeat; posizione: parente;}

Sostituire la larghezza e l'altezza con quello della vostra immagine e "my_image_file.gif" con il nome del file immagine.

5

Aggiungere CSS per impostare la visualizzazione e il posizionamento dei link aggiungendo il codice di stile:

my_image_map un {display: block; posizione: absolute;} 6

Aggiungere ulteriori CSS per gestire ogni sezione della mappa immagine aggiungendo codice nel formato:

my_image_map un link1 # {width: 150px; height: 100px; top: 200px; sinistra: 10px;}

Sostituire la larghezza e l'altezza con l'area di ogni sezione e top e left con la posizione della sezione dai bordi dell'immagine. Aggiungere "< / stile" > dopo l'ultimo stile.

Per esempio:

my_image_map un link1 # {width: 150px; height: 100px; top: 200px; sinistra: 50px;} #my_image_map un link2 # {width: 150px; height: 100px; top: 200px; sinistra: 200px;} #my_image_map un link3 # {Larghezza: 150px; height: 100px; top: 200px; sinistra: 40px;} < / stile > 7

Salvare il file HTML e caricarlo sul server.