De Freak a Geek

Fondo aleatorio con JavaScript

Una de las plantillas que existen para WordPress es Random Image, que se parece mucho a la plantilla WordPress Default. La peculiaridad de esta plantilla es que, como su nombre indica, tiene una imagen aleatoria (random image = imagen aleatoria, cuanto inglés sé): la imagen de fondo de la cabecera de página. Pues si, como yo, usas Bitacorae como CMS, con un poquito de código JavaScript puedes conseguir el mismo efecto.

En el ejemplo que he hecho yo, la información de los posibles fondos se guarda en la hoja de estilo (CSS). Para ello, insertamos el siguiente código en el archivo css tantas veces como fondos aleatorios queramos:

#cabecera<Nº> {background: url("<URL>" no-repeat top #FFFFFF;}

. Un ejemplo sería éste:

#cabecera1 {background: url("back1.jpg" no-repeat top #FFFFFF;}
#cabecera2 {background: url("back2.jpg" no-repeat top #FFFFFF;}
#cabecera3 {background: url("back3.jpg" no-repeat top #FFFFFF;}
#cabecera4 {background: url("back4.jpg" no-repeat top #FFFFFF;}
#cabecera5 {background: url("back5.jpg" no-repeat top #FFFFFF;}

Ahora toca poner el código JavaScript en la página web. Este código lo colocaremos donde queramos que esté la sección con el fondo aleatorio. Es el siguiente:

<script>document.write('<div id="cabecera' + (Math.floor(Math.random() * 5) + 1) + '">');</script>Blablablabla</div>

Haced la prueba. Es un truquito muy sencillo, de principiantes, pero es que yo soy un principiante, que este no es mi primer script porque lo primero siempre es el hola mundo.

Actualización: Se me olvidó aclarar que para poner cuantas imágenes queramos, basta con poner tantas cabeceras como imágenes deseemos en la sección de estilo y cambiar el número 5 que aparece en el código JavaScript por el número de imágenes que usemos.