Mappatura immagine con i CSS

Mappatura Immagine - Questo tutorial vi mostrerà i benefici della mappatura di immagini e perché si dovrebbe attuare quando siti di costruzione. Io vi porterà attraverso il come e il perché, oltre a mostrare immagini di mappatura in azione. Questa mappatura immagine tutorial si rivolge a principianti e richiede solo di conoscere le basi di HTML e CSS.

Per vedere la demo di mappatura di immagini in azione clicca qui

Perché usare un immagine Map?

Si consideri la seguente immagine. Si noti che in realtà è 2 immagini che sono stati immessi nel file stesso. Ciò può essere ottenuto utilizzando il software di imaging più bene come Photoshop.

Ci sono due vantaggi principali per la mappatura di immagini. Il primo è il codice più pulito, cosa che tutti i web designer dovrebbe aspirare a raggiungere, la seconda è mapping immagine capacità unica di superare le questioni sollevate dagli Stati pulsante.

Quando si utilizza immagini di rollover hai bisogno di scaricare più di 1 immagine, sarà anche necessario per visualizzare questo quando cambia lo stato delle immagini, il che significa che il browser sarà necessario per rendere la seconda immagine scaricata, quindi il cambio di data non sarà più agevole la prima volta che viene visualizzato. Utilizzando una mappa immagine si ferma a questo problema del tutto, perché quando l'immagine originale viene scaricato è così la seconda. Non c'è lag, è così semplice.

Come per usare un'immagine Map

Prendiamo in considerazione che voglio desidera utilizzare l'icona di cui sopra come immagine di rollover. Questo avrà due stati: grigio quando la pagina iniziale carichi; poi colorati quando l'utente si posiziona su di esso. Per fare questo avremo bisogno di utilizzare alcune semplici stile CSS, il codice si desidera cercare qualcosa di simile a questo.

body{
font-size: 12pt;
font-family: Arial;
}
#links {
padding:10px;
}
a.bookmark {
background: url('/images/delicious.gif') left no-repeat;
background-position: 0px -17px;
text-decoration: none;
pointer:cursor;
padding-left: 18px;
margin-left:5px;
}
a.bookmark:hover {
background: url('images/delicious.gif') left no-repeat;
background-position: 0px 1px;
text-decoration: none;
padding-left: 18px;
margin-left:5px;
pointer:cursor;
}


Come si può vedere la stessa immagine viene applicata sia agli Stati di stile, tutti stiamo facendo per cambiare lo stato sta modificando il background-position, in modo che quando l'utente si posiziona sopra il link i cambiamenti di stato, ma tutto ciò che è effettivamente cambiando è il la posizione dell'immagine di sfondo della pagina. La vera bellezza di questo è la piccola quantità di effettivo html hai bisogno sulla pagina, una volta che avete fatto questo. Per il nostro esempio il codice HTML reale simile a questo.

< a class = "bookmark" href = "#" >Delicious</ a >


È tutto quello che c'è da fare. Con solo una piccola quantità di CSS e di importo ancora minore di HTML, possiamo creare un modo molto veloce e potente per le immagini rollover. Per vedere la demo in azione clicca qui.