Idees
[ Tornar a la pàgina d'informàtica ]

Una imagen que cruza la pantalla

¡Cuidado, un platillo volador puede atravesar su pantalla! Para producir dicho efecto, todo lo que necesita es un código de script:

Coloque el siguiente script en la sección de encabezado de su página, entre las etiquetas <head> y </head>:

<script>
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if(ns4){
anim = document.broom;
}
else
if (ie4) {
anim = broom.style;
}
animateit()
}
function animateit() {
if(ns4||ie4){
anim.left = parseInt(anim.left)-5;
if (parseInt(anim.left) <-188)
{ anim.left =800 }
setTimeout("animateit()",100);
}
}
// -->
</script>
Ahora añada el siguiente fragmento de código en el cuerpo de su página para dibujar la capa que contendrá la imagen:

<div id="broom" style="position:absolute; top:140; left:800; width:188">
<IMG src="your_image.jpg"></div>
Luego, utilice las siguientes instrucciones para ejecutar el script en cuanto se cargue la página:

<body onload="init();">
Antes de utilizar el código, tiene que adaptarlo:

  • Remplace your_image.jpg por el nombre de su archivo de imagen (con la ruta de acceso, si fuere necesario)

  • Ajuste el tamaño de la capa al de su imagen (width: 188).

  • También debería ajustar el ancho en el script de animación (if (parseInt(anim.left) <- 188)).

  • Determine la posición en su página (en píxeles) donde quiera que la imagen cruce la ventana del navegador (top: 140).