Banner espandibili con i CSS
Non sempre è necessario il JavaScript per ottenere effetti dinamici. In questo articolo vedremo come realizzare dei banner che si espandono al passaggio del mouse, utilizzando esclusivamente i CSS.
L'esempio
Nella pagina di esempio è presente un piccolo banner 120x60 pixel posto sopra un blocco di testo. Quando il mouse passa sopra tale banner, l'immagine viene sostituita da una di maggiori dimensioni (240x240 pixel). Per ottenere tali risultato spessi si utilizza il JavaScript, misto ai CSS, per gestire la comparsa delle due differenti immagini e gli eventi del mose che si trova o meno sopra il banner. Con questo articolo sarà illustrato come il JavaScript possa essere tranquillamente evitato.
Il codice XHTML
Il codice (X)HTML da utilizzare è estremamente semplice:
<div id="banner">
<a href="..."><img src="banner_120x60.png" alt="..." /></a>
</div>
Come i più attenti avranno notato, si è fatto uso di un selettore ID e non di una classe. Ciò è necessario poiché tutte le informazioni necessarie all'effetto, informazioni che in genere differiscono per ogni banner, sono contenute nel foglio di stile.
L'uso del tag DIV, serve a creare un blocco di dimensione fissa che identifichi la posizione del banner indipendentemente dallo stato dello stesso. Infatti non è auspicabile che il banner, una volta espanso, vada a disturbare la posizione degli altri elementi della pagina web.
Il codice CSS
Il codice CSS, nonostante la sua efficacia, non è molto complesso e di facile comprensione:
#banner { height:60px;width:120px }
#banner img { border:none }
#banner a {
display:block;
position:absolute
}
#banner a:hover img, #banner a:active img { display:none }
#banner a:hover, #banner a:active {
height:240px;width:240px;
background:url(banner_240x240.png)
}
Commenteremo ora ogni porzione di codice.
#banner { height:60px;width:120px }
Questa regola serve ad impostare la dimensione dell'area occupata dal banner rispetto gli altri elementi della pagina indipendentemente dallo stato del banner. Altezza e larghezza del box devono essere uguali all'altezza e alla larghezza del banner.
#banner img { border:none }
Così facendo si elimina il bordo attorno all'immagine che costituisce il banner.
#banner a {
display:block;
position:absolute
}
Il link all'interno del box è posizionato in modo assoluto. Così facendo si evita che il banner, allargandosi, possa influenzare il layout (vedi la pagina di esempio). La proprietà è necessaria per il corretto posizionamento.
#banner a:hover img, #banner a:active img { display:none }
Quando il mouse si trova sopra il link (cioè sopra il banner) ovvero il link viene attivato, l'immagine che cositutisce il banner è rimossa, lasciando spazio per l'immagine che costituirà il nuovo banner.
#banner a:hover, #banner a:active {
height:240px;width:240px;
background:url(banner_240x240.png)
}
Quando il mouse si trova sopra il link (cioè sopra il banner) ovvero il link viene attivato, il link assumerà le dimensioni dell'immagine estesa, in questo caso 240x240 pixel. Così facendo, l'area cliccabile si espanderà rispettando le dimensioni della nuova immagine (vedi la pagina di esempio). Avendo posizionato il tag A in modo assoluto, le nuove dimensioni non influenzeranno il layout. La nuova immagine sarà mostrata come sfondo del link e non attraverso tag IMG. Ciò costituisce la principale differenza coi vari JavaScript che svolgono il medesimo compito.
File correlati
Articoli correlati:
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
