BANNERS CÍCLICOS CON JAVASCRIPT

BANNERS CÍCLICOS CON JAVASCRIPT ÍNDICE 1. INTRODUCCIÓN. 2. BANNERS CÍCLICOS. 2.1.BANNER CÍCLICO. 2.2.BANNERS CÍCLICOS CON CAMBIO DE COLOR DEL FONDO DE LA PÁGINA. 2.3.AÑADIR VÍNCULOS A LOS BANNERS CÍCLICOS. AUTOR: Rafael Martínez Benito. CONTENIDO: Banners cíclicos con JavaScript. CAMPO: Informática. DISCIPLINA: Programación web. NIVEL: Ciclos Formativos de informática. 1. INTRODUCCIÓN En este artículo pretendemos dar una orientación de como manejar los banners cíclicos como subtipos de las imágenes de sustitución mediante JavaScript, que ya fueron tratadas en el artículo del mes anterior de esta misma revista. Las imágenes de sustitución son muy utilizadas en el diseño web y adquieren especial relevancia cuando tratamos los banners cíclicos. Los banners es el tipo de publicidad más utilizado en internet debido fundamentamelte a a que es la forma más simple y llamativa de insertar publicidad en una página web. Si además convertimos dicho banner en cíclico, es decir varios anuncios en un mismo banner que van rotando cada x segundos, conseguiremos aumentar nuestra posiilidades publicitarias sin tener que ocupar más espacio en nuestra página. Por tanto pasamos a describir como se insertan estos banners con javascrip de la forma más simple posible. El público al que va dirigido este artículo abarca desde alumnos y profesores de Ciclos Formativos de informática hasta programadores web; en definitiva a cualquiera que se dedique al estudio o diseño de páginas web. Para cada ejemplo se ha incluido el código fuente del script, y la dirección web donde aparece dicho script para ver el resultado del código y un breve comentario al final para dar unos parámetros generales de cómo funciona dicho código. - 1 -

2. BANNERS CÍCLICOS Un banner cíclico es aquel que cambia periódicamente de imagen. Para ello se podría utilizar simplemente un archivo GIF animado. La ventaja de utilizar Javascript es que nos permite utilizar imágenes JPG y por lo tanto de mayor calidad. Para insertar en un documento un banner cíclico necesitamos crear un vector. En Javascript los vectores están representados por el objeto Array (objeto asociado a tipos de datos). Un vector está formado por un conjunto de elementos del mismo tipo que se pueden referenciar de forma individual a través de su índice (lugar que ocupa en el vector, siendo 0 el índice del primer elemento del vector). Para crear un vector, definimos una nueva variable de tipo Array. Podemos hacerlo de dos formas: Especificando los valores de los elementos en la definición: variable = new Array(elemento1, elemento2, elemento3,...) Definiendo el vector y asignando los valores a los elementos en otro momento: variable = new Array( )... variable[0] = elemento1 variable[1] = elemento2 variable[2] = elemento3... La propiedad de los vectores con la que trabajaremos es length, que hace referencia a la longitud del vector. 2.1 BANNER CÍCLICO Para ver el script ir a la dirección: http://users2.nofeehost.com/rmb001 Código fuente: <HTML> <HEAD> <TITLE>SCRIPT 15</TITLE> <SCRIPT LANGUAJE=JAVASCRIPT> <!--OCULTAR GUIONES A NAVEGADORES ANTIGUOS IMAGENES=NEW ARRAY("../IMAGENES/BANNER1.GIF","../IMAGENES/BANNER2.GIF","../IMAGENES/BANNER3.GIF") CONTADOR=2 //ÚLTIMO ELEMENTO DEL VECTOR, PARA QUE EL SIGUIENTE SEA 0 Y POR LO TANTO MUESTRE EL PRIMER BANNER //AQUÍ DEFINO MÁS VARIABLES SI QUIERO OTRO BANNER FUNCTION ROTACION(){ IF (DOCUMENT.IMAGES){ CONTADOR++ - 2 -

IF (CONTADOR==IMAGENES.LENGTH){ CONTADOR=0 DOCUMENT.IMAGEN.SRC=IMAGENES[CONTADOR] //AQUÍ REPITO CÓDIGO SI QUIERO OTRO BANNER SETTIMEOUT("ROTACION()",2*1000) //FIN DE OCULTACIÓN DE GUIÓN A NAVEGADORES ANTIGUOS--> </SCRIPT> </HEAD> <BODY ONLOAD="ROTACION()"> <CENTER> <IMG SRC="../IMAGENES/BANNER1.GIF" NAME="IMAGEN" BORDER=5>  </CENTER> </BODY> </HTML> En primer lugar creamos un nuevo objeto de tipo Array cuyos elementos se corresponden con las direcciones de las imágenes que vamos a insertar. La variable contador nos servirá para pasar de una imagen a otra. Definimos la función rotacion, que realizará las siguientes tareas: - Comprueba si el navegador soporta objetos de tipo imagen. - Incrementa en uno el contador para cambiar el índice. - Comprueba si el valor del contador es mayor que el índice del último elemento del vector. - Asigna el valor del elemento correspondiente del vector a la dirección de la imagen de <IMG>. - Provoca un bucle mediante la función settimeout. La llamada a la función se realiza al cargar el documento. La imagen del documento toma como dirección original la correspondiente al primer elemento del vector. Si queremos incluir varios banners cíclicos en el documento, sólo necesitamos algunas líneas más en el código: Definir un vector y un contador por cada banner cíclico. Repetir las líneas de la función que aumentan y controlan el valor del contador, y la que especifica la dirección de la imagen. 2.2.BANNERS CÍCLICOS CON CAMBIO DE COLOR DEL FONDO DE LA PÁGINA Para ver el script ir a la dirección: http://users2.nofeehost.com/rmb001-3 -

-<HTML> Código fuente: <HEAD> <TITLE>SCRIPT 15</TITLE> <SCRIPT LANGUAJE=JAVASCRIPT>  </SCRIPT> </HEAD> <BODY ONLOAD="ROTACION(), COLOR()"> <CENTER> <IMG SRC="../IMAGENES/BANNER1.GIF" NAME="IMAGEN" BORDER=5>  </CENTER> </BODY> - 4 -

</HTML> 2.3. AÑADIR VÍNCULOS A LOS BANNERS CÍCLICOS Podemos construir un banner cíclico de forma que cuando el usuario pulse sobre él se enlace con otro documento, documento que será distinto según la imagen del banner sobre la que haya pulsado. Para ello definiremos un nuevo vector cuyos elementos serán los destinos a los que serán enviados los usuarios cuando hagan clic en el banner. El truco reside en convertir la etiqueta <IMG> en un vínculo cuya dirección será la que reciba al llamar a la función de Javascript que determina la dirección correspondiente. Veámoslo con un ejemplo. Para ver el script ir a la dirección: http://users2.nofeehost.com/rmb001 <HTML> Código fuente: <HEAD> <TITLE>SCRIPT 16</TITLE> <SCRIPT LANGUAJE=JAVASCRIPT>  </SCRIPT> </HEAD> <BODY ONLOAD="ROTACION()"> <CENTER> - 5 -

<A HREF="JAVASCRIPT:DIRECCION()"><IMG SRC="../IMAGENES/BANNER1.GIF" NAME="IMAGEN" BORDER=5></A> </CENTER> </BODY> </HTML> Definimos las dos variables de tipo Array que contienen las direcciones de las imágenes y sus destinos asociados. El contador en este caso nos servirá para los dos vectores, ya que tienen el mismo número de elementos. En la función que permite rotar los banners utilizamos la propiedad complete de las imágenes para comprobar si se ha cargado completamente (por si el usuario no tiene buena conexión y la imagen tarda más de tres segundo en cargarse). La función dirección asigna a la ventana como dirección el elemento del vector cuyo índice coincide con contador. En el vínculo no sabemos cuál es la dirección que se debe cargar, por lo que desde el modificador HREF. realizamos la llamada a la función correspondiente. Esta es otra forma posible de invocar a Javascript: asignar a una variable de HTML (en este caso un modificador) el resultado de una o varias sentencias de Javascript: HREF= javascript:sentencia1;sentencia2;... - 6 -