sábado, 7 de abril de 2007

Imagen con efecto fading

El siguiente código permite visualizar una imagen creando un efecto de fading:
<html>
<head>
<style type="text/css">
#photoholder {
width: 640px;
height: 480px;
background: #ffffff url("loading.gif") 50% 50% no-repeat;
}
#thephoto {
width: 640px;
height: 480px;
}
</style>
<script>
document.write("<style type='text/css'>#thephoto {visibility: hidden;}</style>");
window.onload = function() { initImage() }

function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}

function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
obj.style.filter = "alpha(opacity:"+opacity+")";
obj.style.KHTMLOpacity = opacity/100;
obj.style.MozOpacity = opacity/100;
obj.style.opacity = opacity/100;
}    

function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}    
</script>
</head>
<body>
<div id="photoholder"><img src="image.jpg" id="thephoto" /></div>
</body>
</html>
El contenedor de la imagen, identificada como thephoto, es un elemento <div>, identificado como photoholder. El estilo aplicado a thephoto sirve para dimensionar la imagen final, mientras que el aplicado a photoholder sirve para dimensionar una imagen con el mensaje "cargando..." que se mostrará inicialmente como fondo de este elemento.

Por si la imagen está en caché y se visualiza antes de que se produzca el efecto fading, es necesaria la línea de código:
document.write("<style type='text/css'>#thephoto {visibility: hidden;}</style>");
Una vez cargada la página Web, se llamará a la función initImage, que hace la imagen completamente transparente, llamando a la función setOpacity, y después crea el efecto fading, llamando a la función fadeIn:
window.onload = function() { initImage() }
Se puede ver un ejemplo de imagen con efecto fading aquí.

0 comentarios:

Publicar un comentario

 

RSS RSS