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.
