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!
Se trovi questo articolo su un blog diverso da “blog.merlinox.com” si tratta probabilmente di una copia non autorizzata. L’indirizzo originale di questo articolo è: Banner ingrandibili SOLO css scritto da Merlinox.
Sei il solito porcellone! Fai il bravo che tra meno di 48 ore sarai un marito!
Io studio CSS per voi e voi mi date del porcellone… boh!
Bello! Lo userò!
Ottima mossa! E il livello che la contiene deve avere anch’esso una height:auto, giusto?
Pingback: links for 2008-03-06 » Traffyk
Pingback: Adsense Espandibile | MrX
Pingback: Dreamweaver Rollover
Uhm…credo sia errato il link all’immagine perchè io nella tua pagina non vedo nulla, solo una striscia arancione
@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.
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!
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!