poner imagen con 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.

2 Comentarios

Dejar respuesta

Please enter your comment!
Please enter your name here