Código HTML:
<!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 limite = -64;
var despl;
var suma = -2;
var mueve = 0;
function cambiaArr(){
clearTimeout(despl);
suma = -2
limite = -64;
cambia();}
function cambiaAba(){
clearTimeout(despl);
limite = 0;
suma = 2
cambia();}
function cambia(){
if(mueve != limite){
clearTimeout("despl");
mueve = mueve + suma;
document.getElementById("persiana").style.top = mueve + "px";
despl = setTimeout("cambia()" , 50);
}
}
</script>
<style type="text/css">
body{background-color:black; color:white; }
#contenedor {position:relative; background-image:url([url]http://www.forosdelweb.com/images/icons/icon7.gif);[/url] cursor:pointer; float:left; width:16px; height:64px; overflow:hidden; border:none; margin-left:100px; }
#persiana {position:absolute; top:0; left:0; background-image:url([url]http://www.forosdelweb.com/images/icons/icon5.gif);[/url] background-color:red; width:16px; height:64px; overflow:hidden; border:none; }
</style>
</head>
<body>
<h2>Transición de imagen. </h2>
<div id="contenedor" onmouseover="cambiaArr()" onmouseout="cambiaAba()"><div id="persiana"></div></div>
</body>
</html>