Si deseas tener un banner que cambie con cada visita a tu página/blog, con el siguiente código lo podrás conseguir. Actualmente mi blog tiene esta característica (quizás cambie pero por el momento no y creo que quedará así por mucho tiempo). El rotador de imágenes puede servir en cualquier lugar pero de ésto dependerá el tamaño de las imágenes y dónde sea posicionado el código. Tomemos como ejemplo un banner de cabecera. Creando un nuevo elemento HTML y posicionando éste en lo alto de la página, pondremos el siguiente código:
Ahora se preguntarán, ¿y de qué rayos sirve ésto? Pues aún falta. Ahora en el editor de HTML y antes de </body> pondremos el siguiente código Javascript:
Para traducir esto en palabras (aunque quizás queden más perdidos con esto XD), aquí se crea un arreglo de tipo var, el cual en Javascript se adaptará al tipo de dato que se le asigne, es decir, si se le asigna un número entero se comportará como int; si se le asigna una palabra o cadena de caracteres (como en este caso) se comportará como String y así sucesivamente. Cada posición del arreglo contendrá la etiqueta HTML de inserción de imágenes, con la URL de cada imagen en cada posición del arreglo. Luego, se crea una variable de tipo var para realizar una operación matemática que tomará un número aleatorio entre 0 y la última posición del arreglo (con esto el tipo var esta vez se comportará como int). Finalmente, busca la etiqueta HTML que se agregó al principio (<div id="RotadorImg"></div>) y, con la propiedad innerHTML, ésta se cambiará por el elemento del arreglo en la posición aleatoria asignado, es decir, la etiqueta que contiene la URL de una imagen al azar. Con esto, cada vez que se llame al id RotadorImg se va a cambiar esa etiqueta por la etiqueta de la imagen.
Se pueden agregar todas las imágenes que se deseen añadiendo lo siguiente justo debajo de la última imagen declarada:
imagen[NÚMEROIMAGEN] = "<img src="URLIMAGEN"/>";
Es importante que NÚMEROIMAGEN sea un número menos que el total de imágenes, es decir que si son cuatro las imágenes en el código, la última quedará con el número 3. Ésto es porque el conteo se hace desde cero, ya que se trata de un arreglo donde la posición cero se cuenta como el primer elemento (en este caso un string que contiene el código HTML de la imagen). Entonces nuestras cuatro imágenes estarán declaradas así:
imagen[0] = "<img src="URLIMAGEN1"/>";
imagen[1] = "<img src="URLIMAGEN2"/>";
imagen[2] = "<img src="URLIMAGEN3"/>";
imagen[3] = "<img src="URLIMAGEN4"/>";
Si se desea, a las imágenes también se les puede asociar un enlace. Para ésto, al código le agregamos lo siguiente:
imagen[NÚMEROIMAGEN] = "<a href = "URLENLACE"><img src="URLIMAGEN"/></a>";
Acá hay un ejemplo de cómo quedaría ésto. Son cuatro imágenes que rotarán aleatoriamente y están linkeadas (al foro latino de SCANDAL aprovecho de hacerle publicidad, regístrense. Yo soy moderador XDDD).
0 comentarios:
Publicar un comentario