Guide, risorse e articoli per webmaster e webdesigner

Add to Google Reader or Homepage

domenica 18 maggio 2008


Menù

Home
Html & XHtml
Css
Javascript
Php
Motori di ricerca
News web
Contatti

Login Form






Password dimenticata?
Nessun account? Registrati
Home arrow Css arrow Articoli css arrow Effetto zoom su le immagini con i css

Effetto zoom su le immagini con i css Stampa E-mail
Scritto da Vincenzo   

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;
}



 

Feed Rss


Corso CSS e XHTML
Web Design ed Accessibilità secondo il W3C.Corso con tutor ed attestato finale!