[Tutorial]Fondo Aleatorio

<b>Tutorial Fondo Aleatorio con PHP y CSS</b>

Bueno este tutorial es realmente bastante básico, sin embargo entre ayer y hoy me han preguntado mucho como es que hago en mi web para que cambie el fondo cada que se actualiza la pagina.

Como decía es bastante básico, únicamente necesitamos crear un array con las url de nuestras imágenes y hacer el reemplazo de estas en nuestro css con la función rand() de php.

Ejemplo:
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><?php

//Creamos un array con las imagenes a enlistar
$imagenes[0]='back_main.jpg';
$imagenes[1]='back_main2.jpg';
$imagenes[2]='back_main3.jpg';
$imagenes[3]='back_main4.jpg';
$imagenes[4]='back_main5.jpg';
$imagenes[5]='back_main6.jpg';
$imagenes[6]='back_main7.jpg';

// Elegimos un rango aleatorio entre 0 y nuestro ultimo valor del array (6)

$i=rand(0,6);
&nbsp;&nbsp;
?><!--c2--></div><!--ec2-->

La variable imágenes es un vector, y se empieza a indexar de 0 en delante, el valor por ejemplo de $imagenes[3] es una dirección, cuando sea llamada la variable, la salida sera: “back_main4.jpg” ¿Qué pasa con esto, que podemos usar en lugar de un numero definido otra variable, en este ejemplo “i” y tiene como valor definido un randowm entre 0 y 6, es decir que cada que sea llamada su salida será de forma aleatoria un 0,2,6,4,2,3,1,0,2, etc.

Una vez que ya tenemos direcciones aleatorias, ahora vamos a incrustarlas en nuestro CSS, y esto bastante, pero bastante simple; basta con hacer un echo

Ejemplo:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->body {
&nbsp;&nbsp;&nbsp;&nbsp;margin-left: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-top: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-right: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(<? echo $imagenes[$i];? /*remplazamos la url por la variable $imagenes*/?>);
&nbsp;&nbsp;&nbsp;&nbsp;background-repeat: repeat-y;
}<!--c2--></div><!--ec2-->

En este ejemplo, la propiedad background-image llama a una url (que es donde esta localizada nuestra imagen) en lugar escribir una dirección fija, escribiremos nuestra variable $imagenes, con esto la salida del navegador será:

background-image: url(back_main.jpg);

background-image: url(back_main3.jpg);

background-image: url(back_main1.jpg);

background-image: url(back_main6.jpg);

Es decir, obtendremos la dirección de nuestra imagen y esta será siempre una distinta cada que se llame al archivo. No importa si el css es un archivo externo o incrustado en el html donde estamos insertando nuestro código php, lo importante es que al llamar al archivo en cuestión se encuentre el código php y el css.

Ejemplo funcionando, <a href="http://kitschmultimedia.info" target="_blank">http://kitschmultimedia.info</a> //cada que actualicen verán como cambian las imagenes de fondo

Saludos

 

Buen tuto kitsch, sencillo y logra algo muy interesante

Si sabes que las imagenes se llamaran de esa forma puedes reducir el codigo solo a esto:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
body {
&nbsp;&nbsp;&nbsp;&nbsp;margin-left: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-top: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-right: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: 0px;
&nbsp;&nbsp;&nbsp;&nbsp;background-image: url(back_main<? echo rand(0,6);? /* remplazamos el numero de la url por un numero al azar de 0&nbsp;&nbsp;a 6 */?>.jpg);
&nbsp;&nbsp;&nbsp;&nbsp;background-repeat: repeat-y;
}
<!--c2--></div><!--ec2-->

o sea te evistas el array, por tanto memoria y muchas lineas de codigo.