|
Descripción: Una de las
características de DHTML es la abilidad de mover elementos alrededor
de la página. En este script, la imagen flota a través de toda la
ventana. Además la imágen puede llevar un link!
Demo:
Mira a tu alrededor...
Instrucciones
Paso 1: Descargue
el siguiente archivo .js y súbalo al directorio de su web (click con el
botón derecho del mouse y elegir "Guardar destino como..."):
moveobj.js
Paso 2: Agregue
el siguiente código en la sección <head> de su página:
Paso 3: Agregue
el siguiente código en la sección <body> de su web, afuera
de cualquier otro tag.:
Paso 4: Finalmente,
inserte los siguientes eventosdentro del <body> tag mismo, de esta
manera:
<body onLoad="pagestart();"
onUnload="if(brOK) {stopme('chip1'); stopme('chip2'); stopme('chip3');}" >
Ya tienes el Script instalado y
listo para funcionar. Sigue leyendo para ver como configurarlo a tu propio
gusto.
Configurando
el Script
Este Script puede animar una
cantidad ilimitada de imágenes. Las instrucciones de arriba nos crean una
demo para 3 imágenes. Para añadir más imágenes el proceso es muy simple.
Cada imágen es identificada dentro de todo el Scipt con el nombre "chipx".
Por ejemplo, la primera imágen se llama "chip1",
la segunda "chip2", etc. Los puedes
ver en los códigos de los pasos 2, 3, y 4.
A continuación están los pasos para modificar el script animando varias
imágenes:
1) Dentro del código del
Paso 2,
agregue/borre más varables "chipx",
dependiendo de la cantidad de imágenes que quieras usar.
2) Dentro del código del Paso 3, agregue/borre más <div> tags
según se requieran. Asegúrese que el atributo "ID" dentro de cada <div>
tag esté definido con un único nombre chip de la imagen voladora (ej: chip1).
3) Finalmente, debemos editar el código del Paso 4. Supongamos
que estoy animando dos imágenes. El código nuevo será:
onLoad="pagestart();"
onUnload="if(brOK) {stopme('chip1'); stopme('chip2');}"
Note como he llamado a la
función stopme() dos veces, cada una con el ID del nombre de las dos
imágenes usadas como sus parámetros. Si estuviéramos animando cuatro
imágenes, el código sería:
onLoad="pagestart();"
onUnload="if(brOK) {stopme('chip1');
stopme('chip2');stopme('chip3');stopme('chip4');}"
Eso es todo! Aunque el la explicación pareza larga, es bastante
fácil de comprenderla...
Listo! |
