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!!!
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 con js e css scritto da Merlinox.
