Buscador

Escribe tu búsqueda y presiona enter

Rotador de imágenes al azar en cada visita (Tutorial HTML & Javascript)




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:




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 éste también se cuenta como variable. 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).

Aprieta F5 para cargar de nuevo esta página y ver el resultado.



0 comentarios:

Publicar un comentario