DHTML: Gráfica y efectos con las imágenes Imagen animada Compatibilidad: Ms Internet Explorer, Netscape Fácilmente configurable (es suficiente sustituir la imagen "vespa.gif" con otra imagen, incluso de tamaño diferente). Esta demo es ante todo un ejemplo que nos ayudará a comprender las potencialidades del HTML dinámico. Drag'n'drop 1 Compatibilidad: Ms Internet Explorer, Netscape HTML dinámico permite arrastrar objetos en la página gracias a las potencialidades de su modelo de objetos. En esta demo una imagen puede arrastrarse a cualquier parte de la pantalla. Drag'n'drop 2 Compatibilidad: Ms Internet Explorer, Netscape Como en el ejemplo anterior, esta demo permite, gracias a las potencialidades del DOM de HTML dinámico, arrastrar objetos en la página. En esta demo pueden arrastrarse tres imágenes a cualquier parte de la pantalla de manera completamente autónoma una de otra Movimiento horizontal Compatibilidad: Ms Internet Explorer, Netscape Imagen en movimiento de un punto hacia la derecha, con otro enlace que hace que vuelva a la posición inicial. Movimiento diagonal hacia abajo Compatibilidad: Ms Internet Explorer, Netscape Imagen en movimiento de un punto hacia abajo, con otro enlace que la devuelve a la posición inicial. Movimiento diagonal hacia arriba Compatibilidad: Ms Internet Explorer, Netscape Imagen de un punto en movimiento hacia arriba siguiendo una trayectoria diagonal, con otro enlace que la devuelve a la posición inicial Movimiento controlado por el teclado Compatibilidad: Ms Internet Explorer, Netscape Imagen cuyo movimiento hacia la derecha se controla manteniendo pulsada la tecla "A" del teclado. Movimiento controlado por enlace Compatibilidad: Ms Internet Explorer, Netscape Enlace que mueve una imagen cuando lo mantenemos pulsado. El procedimiento se interrumpe cuando el ratón sale del área del enlace. Puzzle e imágenes dinámicas Compatibilidad: Ms Internet Explorer, Netscape La demo examinada, que se cuenta entre las más interesantes de esta recopilación, destaca por un efecto técnico y gráfico absolutamente inédito para las páginas web y el código HTML. La colocación dinámica es el eje de esta demo, que, si bien es de difícil impostación, permite obtener efectos estéticos de gran interés. Imágenes en secuencia Compatibilidad: Ms Internet Explorer, Netscape Esta demo muestra cómo crear animaciones partiendo de simples file de imagen. El funcionamiento es similar al de los gif animados: se establece una secuencia y se asigna un tiempo, expresado en milésimas de segundo. Los usos de este ejemplo DHTML pueden ser muy variados y dependerán en gran medida de las decisiones que adopten los elaboradores. Movimiento "arriba y abajo" Compatibilidad: Ms Internet Explorer, Netscape Imagen en continuo movimiento de arriba hacia abajo como un yo-yo Movimiento remolino Compatibilidad: Ms Internet Explorer, Netscape Imagen en movimiento circular que se va debilitando hasta pararse en el centro del remolino. Estrellas en movimiento Compatibilidad: Ms Internet Explorer, Netscape Imágenes de estrellas que se mueven y expanden desde y hacia un centro. Movimiento circular Compatibilidad: Ms Internet Explorer, Netscape Imágenes en continuo movimiento circular Movimiento orbital Compatibilidad: Ms Internet Explorer, Netscape Imagen con el movimiento típico de la órbita terrestre. Movimiento con forma de "ocho" Compatibilidad: Ms Internet Explorer, Netscape Imagen con movimiento continuo que sigue una trayectoria con forma de "8" Estrellas en movimiento circular Compatibilidad: Ms Internet Explorer, Netscape Pequeñas imágenes de estrellas que giran, en continuo movimiento, alrededor de un centro ideal. Imágenes con movimiento continuo Compatibilidad: Ms Internet Explorer Sencilla demo que genera una imagen con movimiento de izquierda a derecha y viceversa que no se para nunca. Imágenes en movimiento con bloqueo final Compatibilidad: Ms Internet Explorer Similar a la demo anterior con la diferencia de que se bloquea en un punto predeterminado del documento. Imagen que se agranda cuando pasa el ratón Compatibilidad: Ms Internet Explorer Esta demo produce en una imagen normal un efecto por el cual, cuando pasa por ella el ratón, sus dimensiones se modifican. Cuando el ratón sale de la imagen, ésta vuelve a su tamaño original.   2 0   d e m o s u c e s i v a s