Rotar imágenes aleatoriamente
Vamos con otra situación típica que nos solemos encontrar en el momento de desarrollar una web: rotar imágenes al azar cada vez que ingresamos o actualizamos una URL, y de la que José Román escribía hace unos días.
Lo probaremos mediante 3 casos en Javascript y mediante un script en el servidor (PHP, JSP, ASP, …). A parte, se pueden hacer distintos usos de ellas, según sea nuestra forma de programar o la imaginación o necesidades que tengamos.
Javascript
Vamos a explicar tres situaciones: crear la imagen directamente, modificar el estilo de un elemento HTML y seleccionar una imagen de una lista. En todos los casos hay que seleccionar un número aleatoriamente entre 0 y el número de imágenes que tengamos, usando para ello Math.random().
En el primero de los casos, en vez de escribir la etiqueta img directamente usaremos un script para crearla, teniendo el cuenta que conocemos de antemano el nombre de las imágenes y siguen una serie numérica (en este caso 1.png, 2.png, 3.png, …):
<script type="text/javascript">
document.write('<img src="'+parseInt(Math.random()*numero-imagenes+1)+'.png" alt="Cabecera IMG" />');
</script>
Si no podemos crearnos el elemento img porque la imagen se trata del background de un elemento, tendremos que modificar los estilos justo después de la creación del elemento, sin esperar al onload del body para evitar que el elemento no cargue el fondo hasta que toda la página se cargue (en este caso también conocemos el nombre de las imágenes y siguen una serie numérica:
<h1 id="cabecera">Cabecera H1</h1>
<script type="text/javascript">
document.getElementById("cabecera").style.background = "url("+parseInt(Math.random()*4+1)+".png) no-repeat top left";
</script>
El último caso, aunque este se puede juntar con los dos anteriores, es cuando el nombre de las imágenes no lleva una nomenclatura fácil de seguir como en los dos casos anteriores. Para ello, tendremos que guardar el nombre de las imágenes en un array y luego acceder a sus elementos:
<script type="text/javascript">
var imagenes = new Array();
imagenes[0] = "fondo-bonito.png";
imagenes[1] = "fondo-moderno.png";
imagenes[2] = "fondo-clasico.png";
imagenes[3] = "fondo-sencillo.png";
document.write('<img src="'+imagenes[parseInt(Math.random()*4)]+'" alt="Cabecera IMG Array" />');
</script>PHP
Quizás con los métodos anteriores bastase, pero para crear un código HTML más limpio, es conveniente seleccionar la imagen a mostrar en el servidor. Además, el usuario no sabrá la ruta real de la imagen, ya que accedemos mediante la llamada a un script. Y podemos hacer que las imágenes no estén disponibles al usuario directamente (fuera del acceso del servidor web). En este caso hemos incluido las imágenes en el mismo directorio que el script:
<?php
// Filtra los elementos de un array y solo selecciona los que tienen la url de una imagen
function filtro($elem) {
return preg_match('/.*\.(png|gif|jpg)$/', $elem);
}
// Obtenemos los ficheros del directorio actual y tan solo nos quedamos con las imágenes
$ficheros = array_values(array_filter(scandir(getcwd()), "filtro"));
// Posición aleatoria
$pos = rand(0, count($ficheros)-1);
$img = 0;
$dirAct = getcwd();
if (preg_match('/.*\.png$/', $ficheros[$pos])) {
$img = imagecreatefrompng($dirAct . "/" . $ficheros[$pos]);
header("Content-type: image/png");
imagepng($img);
} else if (preg_match('/.*\.gif$/', $ficheros[$pos])) {
$img = imagecreatefromgif($dirAct . "/" . $ficheros[$pos]);
header("Content-type: image/gif");
imagegif($img);
} else if (preg_match('/.*\.jpeg$/', $ficheros[$pos])) {
$img = imagecreatefromjpeg($dirAct . "/" . $ficheros[$pos]);
header("Content-type: image/jpeg");
imagejpeg($img);
}
?>Recursos
Generadores de ayer y hoy que te lo dan casi todo hecho:
