Rollover su immagini senza Javascript
Articolo scritto da Luca Ruggiero
Con un po di fantasia, e con uno sforzo quasi nullo, è possibile ottenere un ottimo effetto rollover su immagini solo con i CSS, quindi senza la minima presenza di script.
E' possibile creare un menu o un semplice link su un'immagine, un banner, o quel che sia. Proviamo proprio questa soluzione: create, col vostro programma di grafica preferito, un banner statico di dimensioni 126X60 con una scritta ed un'altro banner delle stesse dimensioni con un'altra scritta.
(L'articolo continua più sotto...)
');
Per rendere bene l'effetto è consigliabile che i due banner non siano animati. Di seguito il codice HTML:
<a href="#" class="ROLL"></a>Come vedete si tratta di un link vuoto, senza alcun testo o immagine tra i Tag <a> e </a>. Il motivo è che l'immagine del banner verrà utilizzata come background del link e non come elemento fisico della pagina; all'evento CSS :hover includeremo il secondo banner; di seguito il codice CSS dell'esempio:
a.ROLL
{
background-image: url(banner_01.gif);
width: 120px;
height: 60px;
}
a.ROLL:hover
{
background-image: url(banner_02.gif);
width: 120px;
height: 60px;
}
Sento di sconsigliare di creare un intero menu di navigazione in questo modo, o almeno non senza aggiungere del testo nel link, al solo scopo di favorire l'indicizzazione sui motori di ricerca.







