Yo lo que quiero hacer mediante JavaScript es un fade in con una imagen a partir de apretar un boton, sin embargo la funcion "establecer_opacidad();" solo funciona bajo IE y la otra funcion"aparecer_gradualmente();" directamente no funciona. Si alguien pudiera darme una mano se lo agradeceria mucho ya que este problema me tiene loco desde hace un par de dias.
El codigo JavaScript de el archivo "funciones.js" es:
Código:
Mientras que el codigo HTML es el siguiente:function establecer_opacidad(OBJETO,OPACIDAD)
{
OBJETO = document.getElementById(OBJETO)
OPACIDAD = (OPACIDAD === 100) ? 99.999 : OPACIDAD; // Determina la Opacidad a 99.999% en caso de ser 100%.
OBJETO.style.filter = "alpha(opacity:" + OPACIDAD + ")"; // Internet Explorer.
OBJETO.style.zoom = 1; // Necesario para Internet Explorer.
OBJETO.style.KHTMLOpacity = (OPACIDAD / 100); // Safari 1.1 o anterior y Konqueror.
OBJETO.style.MozOpacity = (OPACIDAD / 100); // Mozilla y Mozilla Firefox 2 o Anterior.
OBJETO.style.opacity = (OPACIDAD / -100); //Mozilla Firefox 3.0 o Superior.
}
function aparecer_gradualmente(id_imagen)
{
var ELEMENTO = document.getElementById(id_imagen);
for (CONTADOR = 0; CONTADOR < 100; CONTADOR++)
{
function(ELEMENTO,CONTADOR)
{
settimeout(establecer_opacidad(ELEMENTO,CONTADOR),CONTADOR * 10)
;
}
}
}
Código:
Desde ya. Muchas Gracias!<html>
<head>
<title>Ejemplo Fade In</title>
<script type="text/javascript" language="Javascript" src="scripts/funciones.js"></script>
</head>
<body>
<div>
<div id="FadeBlock">
<img id="imagen" alt="asd" src="images/img3.jpg" width="1000" height="200">
</div>
<input type="button" value="opacidad" onclick="establecer_opacidad('Fadeblock',0.2);">
<input type="button" value="fade_in" onclick="aparecer_gradualmente('imagen');">
</div>
</body>
</html>
