Come usare i CSS per Immagine rollover

September 27

Come usare i CSS per Immagine rollover


Cascading Style Sheet codice permette di aggiungere rollover e altri trucchi visivi per le pagine Web senza dipendere da JavaScript. Per creare un rollover in CSS, utilizzare il: hover pseudo-selettore. È possibile applicare: hover a qualsiasi tag HTML e tutti i browser, ma Internet Explorer 6 verrà visualizzato l'effetto rollover corretta. Il trucco per rollover di immagini è quello di istituire un tag HTML vuota e poi dare uno sfondo con l'immagine iniziale. Lo stato hover passa a uno sfondo diverso. Altezza e larghezza sono aggiunti per assicurarsi che il tag HTML si estende per mostrare l'intera immagine per entrambi gli stati.

istruzione

1 Aprire il file HTML in un editor o crearne uno nuovo. Luogo <div> e </ div> tag da qualche parte tra i tag <body> e </ body>, ma non mettere nulla tra i tag <div>. Dare il tag <div> un attributo "ID". I suoi tag <div> dovrebbe essere simile a questo:

<Div id = "qualche-name"> </ div>

2 Aprire il file CSS per il vostro sito web, se ne esiste uno, o aggiungere <style> e </ style> tag tra i tag <head> e </ head> del file HTML. Aggiungere il seguente codice CSS:

div-name {

fondo: URL (path / to / image.png) centro no-repeat;

Larghezza: XXpx; altezza: XXpx;

}

Modificare il percorso tra le parentesi al percorso dell'immagine iniziale. Questa è l'immagine che mostra prima che l'utente muove un cursore sull'elemento <div>. Modificare la larghezza e l'altezza per abbinare le dimensioni dell'immagine in pixel. Una larghezza di 500 pixel assomiglia "width: 500px;" in CSS.

3 Aggiungere uno stato hover al tag <div> in codice CSS. Il codice sarà simile a questa:

div-name: hover {

fondo: URL (path / to / rollover.png) centro no-repeat;

Larghezza: XXpx; altezza: XXpx;

}

Modificare il percorso tra le parentesi per il percorso per l'immagine di rollover. Questa è l'immagine che apparirà quando un utente passa il puntatore del mouse sopra l'elemento <div>.

Consigli e avvertenze

  • Ogni tag può contrassegnare il: hover classe di pseudo, ma <a>, <span> e <li> ha bisogno di "display: block;" in CSS, se si desidera applicare un rollover di immagini.
  • Si noti che in IE6, è possibile utilizzare solo: hover sul tag <a>. Assicurarsi che i visitatori non devono vedere lo stato rollover da usare in realtà il sito, o se lo fanno, utilizzare un fallback JavaScript.