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í.
Fuente: Onload image fades without Flash.
0 comentarios:
Publicar un comentario