Cambiar Imagen de Fondo 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.

Artículos Recientes

StrandHogg la nueva vulnerabilidad en Android

StrandHogg es la nueva vulnerabilidad en los teléfonos con Android, no importa si tienes la ultima actualización o el móvil más caro.

Spotify deja compartir canciones en historias de Facebook

La plataforma para escuchar música en streaming ha anunciado que ya puedes compartir tu música con tus amigos de Facebook directamente a...

Google Fotos permite buscar textos dentro de imágenes

Para Google tener a muchos usuarios usando sus apps es genial, Google Fotos ahora puede buscar texto en las Fotos que se...

GeneratePress Premium todo sobre este maravilloso tema WordPress

Índice de temasQue es GeneratePress y por que deberías elegirlo¿Por que debería pagar por GeneratePress Premium?GeneratePress para...

WhatsApp agrego bloqueo con huella dactilar a Android

WhatsApp agrego bloqueo con huella dactilar a Android, ya esta disponible en Play Store desde la versión beta de WhatsApp. Aunque desde...

Entradas relacionadas

2 Comments

Leave A Reply

Please enter your comment!
Please enter your name here

Suscríbete a las noticias