Solitamente, per creare gallerie di immagini con qualche piccolo "effetto speciale" si è abituati ad utilizzare Javascript, un ottimo linguaggio di scripting, ma scrivendo codici lunghi e complessi, si rischia di rendere le pagine molto pesanti e quindi lentissime da caricare.
Con l'utilizzo dei fogli di stile si ha la possibilità di creare molti effetti particolari, in questo articolo verrà spiegato come simulare un effetto zoom su un'immagine al passaggio del mouse, in parole più povere , l'effetto che in javascript si otterrebbe con l'utilizzo dell'evento onMouseOver.
Innanzitutto bisogna creare due immagini, una con dimensioni ridotte (miniatura.jpg) e l'altra con dimensioni reali (grande.jpg).
Dopo aver creato le immagini si passa alla realizzazione del contenitore:
#contenitore {
position:relative;
top:30px;
left:50px;
width:80px;
height:60px;
color:#fff;
background-color:transparent;
z-index:100;
}
Ora si dovrà realizzare la classe per la miniatura a cui verranno associate le pseudo-classi che permetterano di definire lo stato del link (in questo caso della miniatura):
#contenitore a.miniatura, #contenitore a.miniatura:visited {
display:block;
width:80px;
height:60px;
background-color:#ffffff;
color:#ffffff;
text-decoration:none;
}
#contenitore a.miniatura:hover, #contenitore a.miniatura:active{
text-decoration:none;
color:#ffffff;
background-color:transparent;
}
Ora che sono stati definiti i parametri per la miniatura si devono definire anche le caratteristiche per l'immagine con le dimensioni reali, in questo caso la classe verrà chiamata "img_grande":
#contenitore a .img_grande, #contenitore a .img_grande:visited{
display:block;
position:absolute;
color:#ffffff;
background-color:transparent;
width:1px;
height:1px;
top:-1px;
left:-1px;
}
#contenitore a.miniatura:hover .img_grande, #contenitore a.miniatura:active .img_grande{
display:block;
position:absolute;
top:70px;
left:200px;
width:401px;
height:289px;
}
Infine possiamo eliminare quel fastidioso bordo intorno all'immagine in questo modo:
#contenitore a img {
border:0;
}
Ora che sono finite le dichiarazioni degli stili si dovra scrivere il codice html tra i tag <body> e </body>:
<div id="contenitore">
<a class="miniatura" href="#" title="Miniatura">
<img src="miniatura.jpg" title="Miniatura" alt="Miniatura" />
<img class="img_grande" src="grande.jpg" title="Immagine grande" alt="Immagine grande" />
</a>
</div>
Potete visionare un'esempio in questa pagina .
Popularity: 13% [?]
Vuoi essere sempre aggiornato??? Iscriviti ai feed o invia un trackback
Nessun commento, scrivi tu il primo!
Articoli correlati