Banner ingrandibili SOLO css

All’articolo precedente abbiamo creato un banner estensibile usando JS e CSS, e associando il tutto ad un DIV.

Però si può fare di meglio, sfruttando la proprietà CSS del tag <A>: hover!

Impostando  il nostro <A> di altezza fissa, con overflow:hidden, possiamo dirgli di ingrandirlo in rollover!

Ecco il codicello:

<style type="text/css">
a.banner{
height: 120px;
overflow: hidden;
border:3px solid #ff6600;
margin: 0 0 10px 0;
/* firefox va solo con display:block... */
display:block;
float:left;
}
a.banner:hover{
height: auto;
}
</style>
<a class="banner" href="http://www.google.com"><img src="http://i43.tinypic.com/358ulqh.jpg" border="0" /></a>

 

Ed ecco l’esempietto:

 

Ciao amici!

Loading Facebook Comments ...

11 pensieri su “Banner ingrandibili SOLO css

  1. Pingback: links for 2008-03-06 » Traffyk

  2. Pingback: Adsense Espandibile | MrX

  3. Pingback: Dreamweaver Rollover

  4. Merlinox Autore articolo

    @liliansi: evidentemente i simpaticono di image shack hanno deciso che non avevano voglia di ostare l’immagine. Provveduto subito con una sorpresa. Grazie per la segnalazione.

    Rispondi
  5. liliansi

    eh a volte capita. io carico le foto sempre sul mio spazio via FTP perchè non mi fido per niente di imageshake. bel trucchetto con i CSS comunque, soluzione interessante! bella anche la foto 😉 ciao!

    Rispondi
  6. Merlinox Autore articolo

    Infatti spesso uso tinypic mi da molta affidabilità. Tempo fa usavo flickr, ma è una me**a e mi ha chiuso anche un account a pagamento senza motivo alcuno. Ora uso picasa web per quelle importanti, tinypic per quelle al volo, imgshack per quelle via url… ma come vedi non sempre vale la pena!

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *