Cambiar fondo con jQuery
Todo programador en alguna ocasión se ha visto en la necesidad de cambiar el color o imagen de fondo de una página o de un contenedor pulsando un botón o link.
En este artículo vamos a ver como se hace utilizando jQuery.
Lo primero que tendremos que hacer es incluir dentro de las etiquetas <head> los scripts jquery necesarios y el código que realiza el cambio del fondo del contenedor.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#cambio').click(function(){
$('#content').css('background-color', '#FF4000');
});
});
</script>
Al hacer click en el link con id=»cambio» estamos cambiando con la propiedad «css» el color de fondo del contenedor con id=»content».
Después, en algún lugar de nuestro <body> pondremos el siguiente link:
<a href="#" id="cambio">Cambia color de fondo</a>
También podríamos cambiar la imagen de fondo por otra si se diera el caso como sigue:
$('#content').css('background-image', 'url(images/image.jpg)');
En vez de un contenedor, también podemos cambiar el fondo del cuerpo de la página o <body> de la siguiente forma:
$('body').css('background-image', 'url(images/image.jpg)');
Autor
¿Buscas trabajo de programador?
10 respuestas a “Cambiar fondo con jQuery”
Deja una respuesta
Si se pretende que el color sea introducido por el usuario con un input
¿Cual sería la función?
Hola,
Para resolver este asunto deberás apoyarte en algún plugin que permite seleccionar un color como por ejemplo Color Picker jQuery Plugin.
Saludos
un favor no saben como hacer que cuando ponga click en el botton me salga el fondo pero con animacion osea, que aparesca lento
Hola, quizás tienes que darle un vistazao a la función animate() de jQuery, Saludos
Hola, gracias por ésta información. ¿Existe alguna forma de que con un mismo botón o id (id=»cambio») retornar al valor inicial? o sea el #content pasarlo de gris a rojo con un clic y de nuevo de rojo a gris con otro clic en el botón de «cambio»?
Gracias, saludos
Si, tan solo sería algo asi:
$(document).ready(function() {
$(‘#content’).click(function(){
$(‘#content’).css(‘background-color’, ‘#FF4000’);
});
});
Muchísimas gracias por responder. Al final utilicé la función toggleClass
.content{
background:#000;
color:#fff;
}
.clase_cambiar {
background: #fff;
color:#000;}
$(document).ready(function() {
$(«#cambio»).click(function(){
$(‘.content’).toggleClass( «clase_cambiar» );
});
});
Saludos y gracias nuevamente.
De mi punto de vista este script es muy básico al igual que malo, hacer que cambie la imagen al hacer click en un linck «#» actualiza la página y provoca lentitud, ya que si alguien accede al sitio con un internet de baja calidad y el sitio es pesado, será una completa pesadilla cambiar la imagen del fondo de este modo.
creo que scrypt así no deviran estar en ningún sitio web.
Es mi opinión personal.
Se agradece de todos modos la intención de ayudar.
muy util tu trabjo..muchas gracias…
Gracias por la ayuda estuve buscando y tu articulo me ayudo con el problema que tenia, saludos.