JS: Gráfica y efectos especiales Menú arbóreo Compatibilidad: Ms Internet Explorer, Netscape Este script genera un menú arbóreo expansible. En las próximas semanas aparecerá publicado un artículo en el que se explicarán detalladamente las impostaciones. Imagen al azar en la portada Compatibilidad: Ms Internet Explorer, Netscape Con este javascript es posible hacer que aparezca una imagen diversa cada vez que el navegante nos visita. Para hacer una prueba, pulsa el botón "reload" de tu navegador y verás los efectos. Se pueden insertar imágenes JPG o GIF, cuya denominación ha de ser "image1" "image2" y así sucesivamente Botones clicables animados Compatibilidad: Ms Internet Explorer, Netscape Los botones clicables animados son un óptimo instrumento para mejorar gráficamente tu sitio, dinamizándolo y haciéndolo más atractivo. A continuación, intentaremos explicar el procedimiento que ha de seguirse para crear estos efectos. Banner random sin CGI o Java Compatibilidad: Ms Internet Explorer, Netscape Este script evita que se deban usar CGI o Java para crear banner random en la propia página. Sin necesidad de volver a cargar toda la página, este script visualiza un banner diverso cada 10 segundos. Resaltar que al banner se le asocia un enlace. Imágenes en movimiento Compatibilidad: Netscape Este script permite el movimiento de las imágenes. En este caso, se trata de una imagen dividida en cuatro partes. Efecto difuminado (fade) Compatibilidad: Ms Internet Explorer, Netscape Típico efecto difuminado (fade) de texto sobre fondo oscuro. El ejemplo funciona correctamente con MSIE y Netscape en su cuarta versión. Imágenes en movimiento Compatibilidad: Ms Internet Explorer, Netscape Arrastre "drag and drop" de imágenes. Imágenes en movimiento Compatibilidad: Netscape Imágenes en movimiento en la pantalla. Menú de imágenes Compatibilidad: Ms Internet Explorer, Netscape Menú seleccionable desde form option con posibilidad de elegir imágenes. Imágenes con OnMouseOver Compatibilidad: Ms Internet Explorer, Netscape Este script permite modificar dinámicamente los botones y cargar, al mismo tiempo, una imagen diversa en una parte impostada de la pantalla. Imágenes en secuencia Compatibilidad: Ms Internet Explorer, Netscape Imágenes fraccionadas que, cuando se activan, producen un efecto "persiana" descendente. Imágenes animadas con Javascript Compatibilidad: Ms Internet Explorer, Netscape Otro efecto onMouseOver, con la diferencia de que en este caso la imagen conserva, incluso cuando el ratón sale de la zona del enlace, el efecto generado. Texto multicolor Compatibilidad: Ms Internet Explorer, Netscape Simple texto estático al que se dota de un efecto multicolor. Texto dinámico con javascript Compatibilidad: Ms Internet Explorer Efecto linkover sobre texto. Texto dinámico Compatibilidad: Ms Internet Explorer Otro efecto linkover. Tablas dinámicas Compatibilidad: Ms Internet Explorer, Netscape Texto dentro de tablas de colores que, si se activa, genera efectos gráficos. Otro ejemplo de texto multicolor Compatibilidad: Ms Internet Explorer, Netscape Otro ejemplo más de texto multicolor Botones clicables animados con variante Compatibilidad: Ms Internet Explorer, Netscape La variante consiste en que el script se compone de tres imágenes en lugar de dos. La primera se visualiza en el momento en que se carga la página, la segunda, cuando el ratón pasa por encima y la tercera sustituye la primera. Botones clicables animados con variante Compatibilidad: Ms Internet Explorer, Netscape Otro ejemplo más del mismo tipo con algunas variantes respecto a los precedentes. Countdown gráfico con envío a un enlace Compatibilidad: Ms Internet Explorer, Netscape Un timer gráfico propiamente dicho que cuenta los segundos de espera fijados de una página Web, de manera que, una vez transcurridos, se nos manda a un enlace predefinido. Texto que se desplaza verticalmente con efecto fade Compatibilidad: Ms Internet Explorer, Netscape Texto que se desplaza en vertical y que gradualmente se va difuminando hasta llegar a confundirse con el fondo. Botones clicables animados (tercer método) Compatibilidad: Ms Internet Explorer, Netscape Otro ejemplo más de botones clicables. Texto invertido Compatibilidad: Ms Internet Explorer, Netscape Este script produce texto al contrario respecto al original insertado en su interno. Botones clicables animados con variante Compatibilidad: Ms Internet Explorer, Netscape La variante, respecto a los ejemplos examinados hasta ahora, consiste en que la imagen cambia sólo cuando el enlace está activo para después volver al estado precedente. Imágenes en secuencia Compatibilidad: Ms Internet Explorer, Netscape Imágenes colocadas secuencialmente que pueden activarse desde un menú. Otras imágenes en secuencia desde form Compatibilidad: Ms Internet Explorer, Netscape Como el precedente, con la diferencia de que el menú está representado por un campo option de un formulario. Visor de imágenes 1 Compatibilidad: Ms Internet Explorer, Netscape Visualiza imágenes mediante menú descendente y botón de confirmación Visor de imágenes 2 Compatibilidad: Ms Internet Explorer, Netscape Muestra imágenes desde menú descendente sin botón de confirmación Efecto "presión" en botón y enlace Compatibilidad: Ms Internet Explorer, Netscape La imagen del botón permanece inalterada hasta que no se pulsa, momento en el que se produce un movimiento similar a la pulsación de una tecla. Banner y enlaces random cada vez que se abre la página Compatibilidad: Ms Internet Explorer, Netscape Gracias a este script se puede evitar el uso de los complejos CGI y AD-server: cada vez que se abra la página, se visualizará un banner diferente con un enlace diferente. No sólo cambia el enlace de la imagen, sino también el enlace textual que se encuentra justo debajo del banner. Banner y enlace random con el correspondiente texto ALT Compatibilidad: Ms Internet Explorer, Netscape Como en el ejemplo anterior, este script simula un Ad-server, pero se diferencia porque no hay enlace textual correspondiente ya que cambia también el texto que se alterna a la imagen. Enlaces desde ventana independiente que cargan en la principal Compatibilidad: Ms Internet Explorer, Netscape Generalmente, por lo que se refiere a las ventanas independientes se plantea el problema de que los enlaces que se encuentran dentro de las mismas no se cargan en la ventana principal. Esto genera, en el peor de los casos, la imposibilidad de navegar. Esta ejemplo muestra cómo cargar las URL desde enlaces de una ventana independiente de la principal. Visor de imágenes 3 Compatibilidad: Ms Internet Explorer, Netscape Otro visor de imágenes, esta vez progresivo: dos teclas permiten navegar adelante y atrás por entre los ejemplos. Visor de imágenes 4 Compatibilidad: Ms Internet Explorer, Netscape Otro ejemplo de visor de imágenes. Este ejemplo se diferencia por la presencia de un menú textual y no construido con los botones del formulario. Visor de imágenes 5 Compatibilidad: Ms Internet Explorer, Netscape El último visor de imágenes, esta vez con un menú lateral.