Juanjo Coello

Software Developer & Perpetual Wannabe
I tweet stuff at @jjcoellov

Imagen de cabecera aleatoria

Como comenté en el post anterior, he añadido al blog un cambio que me agrada bastante: la de poder cargar una imagen aleatoria al entrar en la página. Bastante fácil todo, excepto por un detalle: como el theme que utilizo define la propiedad de la imagen en el CSS (background-image:url(ruta-imagen)), la generación de la alatoriedad no sabía cómo llevarla a cabo exactamente, hasta que descubrí que jQuery permite la modificación de atributos de las hojas de estilo (enlace). jQuery es una librería de funciones JavaScript que, básicamente, hace mil virguerías. Recomiendo pasarse por la página y echarle un vistazo. Pues bien, al final el código quedó tal que así:

En la cabecera, añadimos la librería:


Y luego en el cuerpo agregamos este código:

    

Y eso es todo. Podría ser mucho más sofisticado: obtener todas las imagenes de un directorio especificado (aunque necesitaría algún lenguaje del lado del servidor para llevarlo a cabo), o generalizarlo para que obtenga una imagen aleatoria en cualquier elemento, simplemente ubicando el código dentro del mismo. Tambiés puede resultar innecesario añadir jQuery para hacer esta nimiedad, pero como resulta bastante sencillo utilizarlo decidí incluirlo. Es muy probable que haya métodos alternativos haciendo uso de funciones nativas de javascript, pero como primera aproximación creo que es adecuado. Si alguien busca algo similar, espero que le sirva de ayuda.