Home Programación Cambiar Imagen de Fondo con JavaScript

Cambiar Imagen de Fondo con JavaScript

3
javascript

Para cambiar la imagen de fondo de un sitio web, teniendo como alternativa varios fondos, seria espectacular, en algunos proyectos de la escuela puedes usarlo para que se vea más vistoso.

Es muy sencillo utilizar unas cuantas lineas de codigo Javascript para que realize este trabajo y el usuario pueda cambiar de color o imagen de fondo.

Pasos a seguir para implementar esta función, el script lo pondremos antes de la etiqueta: </head>

<script language = "JavaScript"> 
function cambiar(a) {
 if (a.tagName == "IMG") 
    document.body.style.backgroundImage = "url(" + a.src + ")"; 
} 
</script>

El siguiente paso es colocar nuestro enlaces para hacer darle al usuario la opción de cambiar el fondo.
Esto podemos colocarlo en cualquier parte, solo debemos recordar que debe estar dentro de las etiquetas: <body> </body> 

<img src="imagen1.jpg" border="0" onClick="cambiar(this)" />
<img src="imagen2.jpg" border="0" onClick="cambiar(this)" />
<img src="imagen3.jpg" border="0" onClick="cambiar(this)" />
<img src="imagen4.jpg" border="0" onClick="cambiar(this)" />
<img src="imagen5.jpg" border="0" onClick="cambiar(this)" />

Podemos poner la url completa de alguna imagen si asi lo queremos y modificar el tamaño de la imagen a mostrar con width=16 y height=16 y darle algun diseño con css para que se vea más bonito.

Aquí pueden ver un ejemplo en tiempo real: Cambiar fondo con javascript

3 COMMENTS

  1. Gracias me sirvio mucho este ejemplo, lastima que para que se quede fijo se necesita utilizar una base de datos para guardar los datos del fondo.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Salir de la versión móvil