Come modificare una mappa immagine su HTML per un codice CSS

November 27

La modifica di una mappa immagine basata su HTML per codice CSS offre tutti i vantaggi di stile di CSS, come in bilico e gli effetti a più livelli. Una mappa immagine CSS è un'immagine divisa in sezioni, ciascuna delle quali proprio cliccabile hotspot. Ogni sezione può avere attributi CSS individualizzati.

istruzione

1 Aprire il file sorgente HTML in un editor di testo, come Blocco note di Windows, e rimuovere qualsiasi codice esistente mappa immagine HTML.

2 Aggiungere una divisione in cui si desidera la mappa immagine di apparire e dare un ID aggiungendo il codice:

<Div id = "my_image_map">.

3 Creare un tag "a href" per ogni sezione della mappa dell'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 quella sezione. Aggiungere "</ div>" dopo l'ultimo anello.

Per esempio:

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

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

<a href="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 "<head>" del file HTML:

<Style type = "text / css">

my_image_map {width: 600px; altezza: 600px; fondo: URL (my_image_file.gif) no-repeat; position: relative; }

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

5 Aggiungere CSS per impostare il display e posizionamento dei collegamenti aggiungendo il codice di stile:

my_image_map un {display: block; position: absolute; }

6 Aggiungere ulteriore CSS per gestire ogni sezione della mappa immagine aggiungendo codice nel formato di:

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

Sostituire la larghezza e l'altezza con l'area di ogni sezione e sostituire sopra ea sinistra con la posizione della sezione dai bordi dell'immagine. Aggiungere "</ style"> dopo l'ultimo stile.

Per esempio:

my_image_map un # link1 {width: 150px; altezza: 100px; top: 200px; sinistra: 50px; } #my_image_map Un # link2 {width: 150px; altezza: 100px; top: 200px; sinistra: 200px; } #my_image_map Un # link3 {width: 150px; altezza: 100px; top: 200px; sinistra: 40px; } </ Style>

7 Salvare il file HTML e caricarlo sul server.


Articoli Correlati