Hace poco os mostré como rotar imágenes aleatorias en la cabecera de Wordpress a través de PHP. En este tutorial os mostraré otra técnica en la que con una pequeño y rápido cargador en PHP podréis mostrar cualquier imagen al azar directamente desde CSS. Para empezar deberás agrupar y nombrar las imágenes que deseas rotar con el mismo nombre y seguidas de un número secuencial. Por ejemplo:
logo_1.png, logo_2.png, logo_3.png, ...
borde_1.png, borde_2.png, borde_3.png, ...
foto_1.png, foto_2.png, foto_3.png, ...
......
Ahora crea un fichero de texto dándole el nombre de img_azar.php el cual deberá residir en la misma carpeta donde se encuentre tu fichero CSS. Pega en este el siguiente código y grábalo.
<?php
if (isset($_GET['imgazar'])) {
header("Content-type: image/" . $_GET['ext']);
readfile($_GET['imgazar'] . mt_rand($_GET['a'], $_GET['b']) . '.' . $_GET['ext']);
}
?>
Ya sólo queda que edites tu fichero CSS e implementes el siguiente atributo donde desees imágenes al azar, modificando por supuesto los parámetros necesarios:
background-image: url("img_azar.php?imgazar=./images/logo_&ext=png&a=1&b=3");
A continuación diseccionaré este elemento para que entiendas los parámetros resaltados que son los que deberás modificar:
img_azar=./images/logo_
La URL donde se encuentran las imágenes, incluyendo el prefijo del grupo de imágenes y excluyendo el número secuencial.
ext=png
La extensión de fichero del grupo de imágenes, (png, jpg, gif, bmp...)
a=1
El número secuencial de la primera imagen.
b=3
El número secuencial de la última imagen.
Grábalo todo y listo. Personalmente prefiero ensuciarme las manos e implementarlo todo directamente desde PHP, pero a pesar de ello esta técnica tiene la ventaja de ser menos intrusiva y centralizada gracias al CSS.
Nota: Si deseas implementar esta técnica en Wordpress, en vez de crear el fichero img_azar.php también tienes la opción de implementar el código directamente en el fichero functions.php de tu plantilla si este existe. En tal caso deberás modificar el elemento de CSS con el siguiente cambio:
img_azar.php?imgazar pasará a ser functions.php?imgazar
vía Feed RSS
por Email
"
"
12 Respuestas
8 Diciembre 2007 - 10:52
Hecho y funcionando perfectamente! Un poco tarde, pero finalmente lo he implantado, ya te dije que me gustaba la idea.
Si parece que soy tu conejillo de indias…jejeje
2 Febrero 2008 - 14:48
Muchas gracias,
Funciona de cine
4 Junio 2008 - 22:29
gracias un buen aporte para todo los que empesamos en el mundo del diseño web
23 Junio 2008 - 02:07
Muchas gracias al creador de esta inteligente solucion en css para la imagenes aleatorias para la cabecera de una web, la implemente en mi pagina y funciona a la perfeccion, logre el efecto que queria, sigan trabajando así
13 Junio 2009 - 10:51
Genial, de 10 el tutorial.
Lo he implantado en mi web y funciona correctamente.
Muchas gracias por la ayuda
29 Julio 2009 - 01:49
Excelente Aporte muy bueno el tutorial también le doy un 10 de calificación.
26 Agosto 2009 - 00:58
Hola, soy algo nueva en esto, ¿Sólo funciona en el header? Por que tengo un div el cual me gustaría que cargara las imagenes.
Intenté hacerlo así como lo pones y no lo he logrado
27 Agosto 2009 - 09:58
Diana, esta técnica funciona en cualquier parte del código que desees.
11 Noviembre 2009 - 07:03
hola la verdad suena interesante pero ami me gustaria implementarlo en JavaScript y en un sitio HTML y no se como hacerlo.
Me gustaria Encontrar un Code javaScript que sea corto y Facil de modificar e utilizar en un sitio web….
Gracias de antemano y muy buen aporte…
SALUDOS
[ espero poder utilizar este aporte en un wordpress ]
28 Diciembre 2009 - 23:37
Excelente!
Primero lo probe con php y php y no me funciono para joomla, pero este esta de lujo.
Muchas Gracias!!!
23 Enero 2010 - 01:17
Muy buen tutorial. Funciona a la perfección.
¡Gracias!
17 Febrero 2010 - 00:11
Tambien, en lugar de ordenar las imagenes segun un numero, podemos usar
scandir que nos crea un array con el nombre de los archivos dentro de una carpeta …
Otra forma de ahcerlo dinamico seria leyendo la hroa en el cliente (navegador) y mostrando una imagen segun su hora
sea de dia o de noche 
Deja tu comentario