Banners Ciclicos

Banners cclicos con JavaScript. Diseo web.
BANNERS CCLICOS CON JAVASCRIPT
NDICE
1. INTRODUCCIN. 2. BANNERS CCLICOS. 2.1.BANNER CCLICO. 2.2.BANNERS CCLICOS CON CAMBIO DE COLOR DEL FONDO DE LA PGINA. 2.3.AADIR VNCULOS A LOS BANNERS CCLICOS.
AUTOR: Rafael Martnez Benito. CONTENIDO: Banners cclicos con JavaScript. CAMPO: Informtica. DISCIPLINA: Programacin web. NIVEL: Ciclos Formativos de informtica. 1. INTRODUCCIN
En este artculo pretendemos dar una orientacin de como manejar los banners cclicos como subtipos de las imgenes de sustitucin mediante JavaScript, que ya fueron tratadas en el artculo del mes anterior de esta misma revista. Las imgenes de sustitucin son muy utilizadas en el diseo web y adquieren especial relevancia cuando tratamos los banners cclicos. Los banners es el tipo de publicidad ms utilizado en internet debido fundamentamelte a a que es la forma ms simple y llamativa de insertar publicidad en una pgina web. Si adems convertimos dicho banner en cclico, es decir varios anuncios en un mismo banner que van rotando cada x segundos, conseguiremos aumentar nuestra posiilidades publicitarias sin tener que ocupar ms espacio en nuestra pgina. Por tanto pasamos a describir como se insertan estos banners con javaScrip de la forma ms simple posible. El pblico al que va dirigido este artculo abarca desde alumnos y profesores de Ciclos Formativos de informtica hasta programadores web; en definitiva a cualquiera que se dedique al estudio o diseo de pginas web. Para cada ejemplo se ha incluido el cdigo fuente del script, y la direccin web donde aparece dicho script para ver el resultado del cdigo y un breve comentario al final para dar unos parmetros generales de cmo funciona dicho cdigo.
-1-
2. BANNERS CCLICOS
Un banner cclico es aquel que cambia peridicamente de imagen. Para ello se podra utilizar simplemente un archivo GIF animado. La ventaja de utilizar Javascript es que nos permite utilizar imgenes JPG y por lo tanto de mayor calidad. Para insertar en un documento un banner cclico necesitamos crear un vector. En Javascript los vectores estn 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 travs 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 definicin: 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 CCLICO
Para ver el script ir a la direccin: http://users2.nofeehost.com/rmb001

Cdigo fuente:
<HTML> <HEAD> <TITLE>SCRIPT 15</TITLE> <SCRIPT LANGUAJE=JAVASCRIPT>  </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 imgenes que vamos a insertar. La variable contador nos servir para pasar de una imagen a otra. Definimos la funcin 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 direccin de la imagen de <IMG>. Provoca un bucle mediante la funcin setTimeout. La llamada a la funcin se realiza al cargar el documento. La imagen del documento toma como direccin original la correspondiente al primer elemento del vector. Si queremos incluir varios banners cclicos en el documento, slo necesitamos algunas lneas ms en el cdigo: Definir un vector y un contador por cada banner cclico. Repetir las lneas de la funcin que aumentan y controlan el valor del contador, y la que especifica la direccin de la imagen.
2.2.BANNERS CCLICOS CON CAMBIO DE COLOR DEL FONDO DE LA PGINA
-3-

Cdigo fuente:
-<HTML> <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. AADIR VNCULOS A LOS BANNERS CCLICOS

Podemos construir un banner cclico de forma que cuando el usuario pulse sobre l se enlace con otro documento, documento que ser distinto segn la imagen del banner sobre la que haya pulsado. Para ello definiremos un nuevo vector cuyos elementos sern los destinos a los que sern enviados los usuarios cuando hagan clic en el banner. El truco reside en convertir la etiqueta <IMG> en un vnculo cuya direccin ser la que reciba al llamar a la funcin de Javascript que determina la direccin correspondiente. Vemoslo con un ejemplo.

Cdigo fuente:
<HTML> <HEAD> <TITLE>SCRIPT 16</TITLE> <SCRIPT LANGUAJE=JAVASCRIPT>  </SCRIPT> </HEAD> <BODY ONLOAD="ROTACION()"> <CENTER>
-5-

<A HREF="JAVASCRIPT:DIRECCION()"><IMG NAME="IMAGEN" BORDER=5></A> </CENTER> </BODY> </HTML>
Definimos las dos variables de tipo Array que contienen las direcciones de las imgenes y sus destinos asociados. El contador en este caso nos servir para los dos vectores, ya que tienen el mismo nmero de elementos. En la funcin que permite rotar los banners utilizamos la propiedad complete de las imgenes para comprobar si se ha cargado completamente (por si el usuario no tiene buena conexin y la imagen tarda ms de tres segundo en cargarse). La funcin direccin asigna a la ventana como direccin el elemento del vector cuyo ndice coincide con contador. En el vnculo no sabemos cul es la direccin que se debe cargar, por lo que desde el modificador HREF. realizamos la llamada a la funcin 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;...
SRC="../IMAGENES/BANNER1.GIF"
-6-

Banners Ciclicos

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Banners Ciclicos

Caricato da

Copyright:

Formati disponibili

Banners cclicos con JavaScript. Diseo web.

BANNERS CCLICOS CON JAVASCRIPT

Banners cclicos con JavaScript. Diseo web.

2.1 BANNER CCLICO

Para ver el script ir a la direccin: http://users2.nofeehost.com/rmb001

//AQU DEFINO MS VARIABLES SI QUIERO OTRO BANNER

Banners cclicos con JavaScript. Diseo web.

//AQU REPITO CDIGO SI QUIERO OTRO BANNER

2.2.BANNERS CCLICOS CON CAMBIO DE COLOR DEL FONDO DE LA PGINA

Para ver el script ir a la direccin: http://users2.nofeehost.com/rmb001

Banners cclicos con JavaScript. Diseo web.

//AQU REPITO CDIGO SI QUIERO OTRO BANNER

Banners cclicos con JavaScript. Diseo web.

2.3. AADIR VNCULOS A LOS BANNERS CCLICOS

Para ver el script ir a la direccin: http://users2.nofeehost.com/rmb001

Banners cclicos con JavaScript. Diseo web.

Potrebbero piacerti anche