Add to Google Reader or Homepage

giovedì 28 agosto 2008


Menù

Home
Html & XHtml
Css
Javascript
Php
Motori di ricerca
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   
 

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 .



 
< Prec.


Feed Rss


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