Cambiar fondo web con un click (JavaScript)


Todo diseñador web, cuando las programa, se encuentra muchas veces con problemas que con una web completamente hecha en flash serían (relativamente) fáciles de solucionar, pero que con php/css puede ser toda una odisea solucionarlo.

¿Y porqué no hacerlo en Flash directamente? A veces el presupuesto del cliente no da para eso, pero como nosotros debemos ser profesionales tenemos que ofrecer una solución que sea lo más efectiva posible a la par de menos costosa.

En este ejemplo veremos como cambiar el fondo de nuestra web utilizando JavaScript y con tan sólo un click.

Se puede hacer todo dentro del mismo script, pero yo soy de los que prefiere separar la declaración de las funciones del script que las usa, así que el tutorial lo explicaré de esta forma.

Lo primero será crear un archivo JavaScript donde estará la función y la declaración del Array que contendrá la lista de imágenes que utilizaremos.
imagenes = ['fondos/img01.jpg','fondos/img02.jpg','fondos/img03.jpg'];

function cambiar() {
num = Math.floor(Math.random()*imagenes.length);
document.body.style.background = 'url('+imagenes[num]+') no-repeat';
}
Despúes, en la página donde quieres que el fondo cambie, tendremos que hacer la llamada a la función (sólo si la hemos escrito en un fichero aparte):
<script type="text/javascript" src="js/funciones.js"></script>
Y ya sólo nos queda insertar una imagen o un texto que actue como link:
<a href="#" onclick="cambiar(); return false"><img src="images/atras.png" width="80" height="65" /></a>
Así de simple. Os dejo un ejemplo donde lo hemos usado: www.laposadadelriocarbo.com

1 comentarios:

Jose Luis Ruiz dijo...

muchas gracias, habria alguna opcion de que se quedase el fondo guardado cada ve que entren contactame gracias