-
charly
.User deleted
Il codice XHTML
Il codice (X)HTML da utilizzare è estremamente semplice:CODICE<div id="banner">
<a href="..."><img src="banner_120x60.png" alt="..." /></a>
</div>>
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.
.
InfoSharnet Componentistica Pc Assemblaggi Consigli e guide per formattazioni windows mac linux i migliori software 
html.css, Layout e Sfondi per Destkop
come realizzare Banner espandibili con i CSS |
