Banner ingrandibili con js e css

Vi piacerebbe fare un bel banner alto 60 pixel e quando ci si passa su con il mouse si ingrandisce, ma non sapete come farlo? Oppure qualche altro effetto simile con immagini e div?

 

Eccomi qua per risolvervi il problema con 2 righe due di javascript e un po’ di sano CSS, in modo particolare le proprietà: overflow e height.

 

Ecco qui il codice:

<style type="text/css">
#banner{
height: 60px;
float: right;
/*display: inline;*/
overflow: hidden;
/*background-color: #33FF00;*/
}
</style>
<script type="text/javascript" language="javascript">
function dimensiona(i,mode){
var altezza = "";
if (mode){
//allungo
altezza = "auto";
}else{
//accorcio
altezza = "60px";
}

i.style.height=altezza;
}

</script>

<div id="banner" onmouseover="dimensiona(this,true);" onclick="dimensiona(this,false);" onmouseout="dimensiona(this,false);">
<img src="http://blog.merlinox.com/MRX/BLOG/foto/th_melita-toniolo1.jpg" />
</div>

 

La demo invece la vedete proprio qui a fianco 🙂

Nota bene: guardati anche l’esempio senza js!!!

Loading Facebook Comments ...

Lascia un commento

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