color - Cambio de una imagen de fondo DIV con jQuery
cambiar imagen jquery (13)
Estoy creando una tabla de tasas de llamadas de expansión / contracción para la empresa para la que trabajo. Actualmente tengo una tabla con un botón debajo para expandirla, el botón dice "Expandir". Es funcional, excepto que necesito que el botón cambie a "Contraer" cuando se hace clic y luego, por supuesto, a "Expandir" cuando se vuelve a hacer clic. La escritura en el botón es una imagen de fondo.
Básicamente, todo lo que necesito es cambiar la imagen de fondo de un div cuando se hace clic, excepto una especie de interruptor.
Así es como lo hago:
CSS
#button{
background-image: url("initial_image.png");
}
#button.toggled{
background-image:url("toggled_image.png");
}
JS
$(''#button'').click(function(){
$(''#my_content'').toggle();
$(this).toggleClass(''toggled'');
});
CSS Sprites funciona mejor. Intenté cambiar de clase y manipular la propiedad ''background-image'' con jQuery, ninguna funcionó. Creo que es porque los navegadores (al menos el Chrome estable más reciente) no pueden "recargar" una imagen ya cargada.
Bono: CSS Sprites es más rápido de descargar y más rápido de mostrar. Menos solicitudes HTTP significa una carga de página más rápida. Reducir la cantidad de HTTP es la mejor manera de mejorar el rendimiento del front-end, por lo que recomiendo ir esta ruta todo el tiempo.
El mio esta animado
$(this).animate({
opacity: 0
}, 100, function() {
// Callback
$(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
// Callback of the callback :)
$(this).animate({
opacity: 1
}, 600)
});
});
Esta es una respuesta bastante simple que cambia el fondo del sitio con una lista de elementos.
function randomToN(maxVal) {
var randVal = Math.random() * maxVal;
return typeof 0 == ''undefined'' ? Math.round(randVal) : randVal.toFixed(0);
};
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images
ram = list[parseFloat(randomToN(list.length))], // Random 1 to n
img = ram == undefined || ram == null ? list[0] : ram; // Detect null
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background
Esto funciona en todos los navegadores actuales en WinXP. Básicamente solo verificando cual es la imagen actual de backgrond. Si es image1, muestre image2, de lo contrario muestre image1.
El material jsapi simplemente carga jQuery desde el CDN de Google (más fácil para probar un archivo misc en el escritorio).
El reemplazo es para la compatibilidad entre navegadores (opera y es decir, agregar citas a la url y firefox, chrome y safari eliminar citas).
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
var original_image = ''url(http://.com/Content/img/wmd/link.png)'';
var second_image = ''url(http://.com/Content/img/wmd/code.png)'';
$(''.mydiv'').click(function() {
if ($(this).css(''background-image'').replace(/"/g, '''') == original_image) {
$(this).css(''background-image'', second_image);
} else {
$(this).css(''background-image'', original_image);
}
return false;
});
});
</script>
<style>
.mydiv {
background-image: url(''http://.com/Content/img/wmd/link.png'');
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="mydiv"> </div>
</body>
</html>
Hay dos formas diferentes de cambiar un CSS de imagen de fondo con jQuery.
-
$(''selector'').css(''backgroundImage'',''url(images/example.jpg)''); -
$(''selector'').css({''background-image'':''url(images/example.jpg)''});
Observa atentamente las diferencias. En el segundo, puede usar CSS convencional y encadenar varias propiedades CSS juntas.
He encontrado una solución en un foro, Toggle Background Img .
Hice el mío usando expresiones regulares, ya que quería preservar una ruta relativa y no usar agregar la función addClass. Solo quería hacerlo complicado, jajaja.
$(".travelinfo-btn").click(
function() {
$("html, body").animate({scrollTop: $(this).offset().top}, 200);
var bgImg = $(this).css(''background-image'')
var bgPath = bgImg.substr(0, bgImg.lastIndexOf(''/'')+1)
if(bgImg.match(/collapse/)) {
$(this).stop().css(''background-image'', bgImg.replace(/collapse/,''expand''));
$(this).next(".travelinfo-item").stop().slideToggle(400);
} else {
$(this).stop().css(''background-image'', bgImg.replace(/expand/,''collapse''));
$(this).next(".travelinfo-item").stop().slideToggle(400);
}
}
);
Personalmente solo usaría el código JavaScript para cambiar entre 2 clases.
Haga que el CSS defina todo lo que necesita en su div MINUS la regla de fondo, luego agregue dos clases (por ejemplo: expandido y contraído) como reglas, cada una con la imagen de fondo correcta (o la posición de fondo si usa un sprite).
CSS con diferentes imágenes
.div {
/* button size etc properties */
}
.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}
O CSS con imagen sprite.
.div {
background: url(img/sprite.gif) no-repeat left top;
/* Other styles */
}
.expanded {background-position: left bottom;}
Entonces...
Código JavaScript con imágenes
$(function){
$(''#button'').click(function(){
if($(this).hasClass(''expanded''))
{
$(this).addClass(''collapsed'').removeClass(''expanded'');
}
else
{
$(this).addClass(''expanded'').removeClass(''collapsed'');
}
});
}
JavaScript con sprite
Nota: la elegante toggleClass no funciona en Internet Explorer 6, pero el método addClass / removeClass también funcionará bien en esta situación
La solución más elegante (desafortunadamente no es compatible con Internet Explorer 6)
$(function){
$(''#button'').click(function(){
$(this).toggleClass(''expanded'');
});
}
$(function){
$(''#button'').click(function(){
if($(this).hasClass(''expanded''))
{
$(this).removeClass(''expanded'');
}
else
{
$(this).addClass(''expanded'');
}
});
}
Por lo que sé, este método funcionará en todos los navegadores y me sentiría mucho más cómodo jugando con CSS y clases que con los cambios de URL en el script.
Publicación anterior, pero esto le permitiría usar un sprite de imagen y ajustar la repetición, así como la posición mediante el uso de la taquigrafía de la propiedad css (fondo, repetición, arriba a la izquierda).
$.each($(''.smallPreview''), function(i){
var $this = $(this);
$this.mouseenter(function(){
$this.css(''background'', ''url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0'');
});
$this.mouseleave(function(){
$this.css(''background'', ''url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0'');
});
});
Si usa un sprite CSS para las imágenes de fondo, puede aumentar el desplazamiento de fondo +/- n píxeles dependiendo de si estaba expandiendo o colapsando. No es un interruptor, pero está más cerca de tener que cambiar las URL de la imagen de fondo.
Una forma de hacer esto es colocar ambas imágenes en HTML, dentro de un SPAN o DIV, puede ocultar el valor predeterminado con CSS o con JS en la carga de la página. A continuación, puede activar el clic. Aquí hay un ejemplo similar que estoy usando para colocar los iconos de izquierda / abajo en una lista:
$(document).ready(function(){
$(".button").click(function () {
$(this).children(".arrow").toggle();
return false;
});
});
<a href="#" class="button">
<span class="arrow">
<img src="/images/icons/left.png" alt="+" />
</span>
<span class="arrow" style="display: none;">
<img src="/images/down.png" alt="-" />
</span>
</a>
$(''#divID'').css("background-image", "url(/myimage.jpg)");
Debería hacer el truco, simplemente conectarlo en un evento de clic en el elemento
$(''#divID'').click(function()
{
// do my image switching logic here.
});