Quando si sposta il cursore del mouse su un'immagine in una pagina Web, è possibile vedere un effetto rollover animata creata usando JavaScript o CSS. Rollovers verificano quando una pagina Web sostituisce un'immagine con un'altra in risposta al movimento del mouse dell'utente. Siti non hanno bisogno di rollover, ma questi effetti possono aggiungere l'interesse visivo alle pagine Web. Se non si conosce JavaScript e vuoi aggiungere rollover di immagini al tuo sito web, è possibile farlo utilizzando i CSS.

rollover CSS

effetti CSS rollover richiedono più lavoro da configurare rispetto JavaScript effetti di rollover, ma ci sono vantaggi di utilizzare i CSS per creare rollover. Quando si utilizzano i CSS, si riduce il tempo necessario per il server Web per trasferire le immagini utilizzate in effetti al browser Web di un utente. È anche rendere il vostro effetti rollover visibile a tutti i visitatori del sito, anziché solo quelli che abilitare JavaScript nel loro browser.

Proprietà CSS

I proprietari dei siti utilizzano i CSS per gli oggetti di stile sulle loro pagine web. CSS attributi come colore di sfondo, di confine e la larghezza di definire il modo in cui le immagini appaiono in una pagina Web. classi CSS definiscono questi attributi. La seguente classe CSS contiene due attributi, chiamato border-width e border-style:

.cssClass {
border-width: 2px; border-style: solido;
}

Se un'immagine riferimento a questa classe, l'immagine verrà visualizzata un bordo solido che è largo due pixel. classi CSS possono anche aggiungere un'immagine di sfondo da un elemento della pagina Web.

Sprites immagine

Gli sviluppatori aggiungono CSS effetti rollover per i siti web, ponendo sprite sulle loro pagine. Uno sprite è una grande immagine fatta di immagini più piccole. Creare uno sprite in un editor di immagini posizionando due immagini adiacenti all'interno di un più ampio un'immagine vuota. L'immagine a sinistra sarà l'immagine che i visitatori del sito vedono quando il caricamento della pagina Web. L'immagine a destra sarà quello che si desidera visualizzare quando un mouse passa sopra lo sprite. Entrambe le immagini devono avere la stessa dimensione.

Anchor tag necessari

tag HTML di ancoraggio, chiamati anche i collegamenti, rendono possibile rollover CSS. i tag di ancoraggio possono utilizzare le classi CSS pseudo che definiscono il modo in cui un collegamento appare quando un mouse passa sopra il collegamento. L'esempio seguente mostra una classe pseudo denominata "hover" collegato a una classe CSS regolare denominata classe:

a.myClass: hover {background-position: -300px 0; }

Ogni ancoraggio che fa riferimento a questa classe si sposterà la sua immagine di sfondo 300 pixel a destra quando si verifica un rollover del mouse, creando l'effetto rollover. Il tag di ancoraggio deve anche fare riferimento alla classe CSS principale che definisce l'altezza e la larghezza di ogni immagine nel vostro sprite.