Este es mi primer post en esta sala; desde hace un tiempito estoy tratando de meterle el diente a Javascript y haciendo algunas cositas por mi cuenta.
En este caso se me presenta un problema con onload, el tema es así; tengo una función donde creo un objeto Images y paso como parámetro una imagen para que se asigne al src del mismo. A su vez aplico este src a una imagen en al página.
El objetivo es que al hacer click en distintos links se vayan mostrando otras imágenes usando como preload un DIV que muestro y oculto.
Por tanto en el onload del objeto Images, ejecuto una función que me oculta el div de la precarga. En Mozilla todo bien pero en IE, una vez que ya vi todas las fotos y por tanto ya cargaron, no me funciona el onload y por tanto no me oculta el DIV.
Aquí dejo el código fuente del HTML con el javascript:
Código:
agradezco vuestra ayuda<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galería de imágenes Javascript</title>
<style type="text/css">
html, body { margin: 0; height: 100%; background: black; }
img { border: 0; }
#contenedor { height: 100%; width: 100%; }
#banda { width: 100%; position: relative; top: 50%; margin-top: -210px; }
#fotos { height: 350px; width: 500px; margin: 0 auto; border: #7C7C7C solid 10px; overflow: hidden; }
#vinculos { height: 70px; width: 500px; margin: 0 auto; margin-top: 25px; text-align: center; }
#vinculos img { margin: 0 10px; }
#preload { position: absolute; height: 350px; width: 500px; text-align: center; background: black; }
#preload img { margin-top: 150px; }
</style>
<script type="text/javascript">
function switchImage(cambia){
document.getElementById("preload").style.visibility="visible";
imagen = new Image();
imagen.src = cambia;
document.getElementById("grande").src = imagen.src;
imagen.onload = actua
}
function actua(){
document.getElementById("preload").style.visibility="hidden";
}
</script>
</head>
<body onload="switchImage('images/logo_1_grande.gif')">
<div id="contenedor">
<div id="banda">
<div id="fotos">
<div id="preload"><img src="images/preload.gif" alt="" /></div>
<img id="grande" src="" alt="" />
</div>
<div id="vinculos">
<a href="javascript:switchImage('images/logo_1_grande.gif');"><img src="images/logo_1_chico.gif" alt="" /></a>
<a href="javascript:switchImage('images/logo_2_grande.gif');"><img src="images/logo_2_chico.gif" alt="" /></a>
<a href="javascript:switchImage('images/logo_3_grande.gif');"><img src="images/logo_3_chico.gif" alt="" /></a>
</div>
</div>
</div>
</body>
</html>
saludos
negro
