Acá hay otros
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>PERSIANA. </title>
<script type="text/javascript">
var alto1 = alto2 = 256; //altura de las barras en px
function cambia1(){
if(alto1 > 0){
alto1 = alto1 - 2; //'2' debe ser submúltiplo de alto1
document.getElementById("persiana1").style.height = alto1 + "px";
setTimeout("cambia1()" , 50);
}
}
function cambia2(){
if(alto2 > 0){
alto2 = alto2 - 2; //'2' debe ser submúltiplo de alto2
document.getElementById("persiana2").style.top = alto2 + "px";
setTimeout("cambia2()" , 50);
}
}
</script>
<style type="text/css">
body{background-color:black; color:white; }
#contenedor1, #contenedor2 {position:relative; background-image:url(http://www.forosdelweb.com/images/icons/icon7.gif); cursor:pointer; float:left; width:16px; height:256px; overflow:hidden; border:none; margin-left:100px; }
#persiana1 {position:absolute; top:0; left:0; background-image:url(http://www.forosdelweb.com/images/icons/icon5.gif); background-color:red; width:16px; height:256px; overflow:hidden; border:none; }
#persiana2 {position:absolute; top:256px; left:0; background-image:url(http://www.forosdelweb.com/images/icons/icon5.gif); background-color:red; width:16px; height:256px; overflow:hidden; border:none; }
</style>
</head>
<body>
<h2>Transición de imagen. </h2>
<div id="contenedor1" onclick="cambia1()"><div id="persiana1"></div></div>
<div id="contenedor2" onclick="cambia2()"><div id="persiana2"></div></div>
</body>
</html>
En las FAQs de javascript y en las de Web General hay bastantes más, aunque no todas son para subir la segunda imagen.