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
"
"
...
"
4 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í
Deja tu comentario