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.
2 Comentarios
muy bueno este tuto , tienes la posibilidad de poner algun ejemplo demo
ResponderBorrarHola, como hago para que la imagen quede fija? cuando el usuario selecciona el fondo.
ResponderBorrar