Cambiar una imagen de fondo DIV con jQuery

Estoy haciendo una tabla de tarifas de llamadas de expansión / colapso para la compañía 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, de nuevo 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 como una palanca.

$('#divID').css("background-image", "url(/myimage.jpg)");  

Debería hacer el truco, solo conéctelo en un evento de clic en el elemento

$('#divID').click(function()
{
  // do my image switching logic here.
});

Personalmente, solo usaría el código JavaScript para cambiar entre 2 clases.

Haga que el CSS describa todo lo que necesita en su div MENOS 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 sprite de imagen

.div {
    background: url(img/sprite.gif) no-repeat left top;
    /* Other styles */
}

.expanded {background-position: left bottom;}

Luego...

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: el elegante toggleClass no funciona en Internet Explorer 6, pero el método addClass/ siguiente removeClasstambié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');
            }
        });
    }

Hasta donde 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.

Hay dos formas diferentes de cambiar una imagen de fondo CSS con jQuery.

1. $('selector').css('backgroundImage','url(images/example.jpg)');
2. $('selector').css({'background-image':'url(images/example.jpg)'});

Mire cuidadosamente para notar las diferencias. En el segundo, puede usar CSS convencional y encadenar múltiples propiedades CSS juntas.

Si usa un sprite CSS para las imágenes de fondo, podría aumentar el desplazamiento del fondo +/- n píxeles dependiendo de si se estaba expandiendo o contrayendo. No es una palanca, pero está más cerca que tener que cambiar las URL de la imagen de fondo.

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');
});

Una forma de hacerlo es colocar ambas imágenes en el HTML, dentro de un SPAN o DIV, puede ocultar el valor predeterminado con CSS o con JS en la carga de la página. Entonces puede alternar al hacer clic. Aquí hay un ejemplo similar que estoy usando para poner 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>

Esto funciona en todos los navegadores actuales en WinXP. Básicamente solo verificando cuál es la imagen de fondo actual. 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 misceláneo en el escritorio).

El reemplazo es para compatibilidad entre navegadores (opera y, por ejemplo, agrega comillas a la url y Firefox, Chrome y Safari eliminan comillas).

<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://stackoverflow.com/Content/img/wmd/link.png)';
            var second_image = 'url(http://stackoverflow.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://stackoverflow.com/Content/img/wmd/link.png');
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="mydiv">&nbsp;</div>
    </body>
</html>

La mía está animada:

$(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)
    });    
});

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);
                }
            }
        );

Publicación anterior, pero esto le permitiría usar un sprite de imagen y ajustar la repetición y el posicionamiento utilizando la abreviatura 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');
  });

});

He encontrado una solución en un foro, Toggle Background Img .

Los Sprites CSS funcionan mejor. Intenté cambiar de clase y manipular la propiedad 'background-image' con jQuery, ninguno funcionó. Creo que es porque los navegadores (al menos el último Chrome estable) no pueden "recargar" una imagen ya cargada.

Bonificación: los Sprites CSS son más rápidos de descargar y más rápidos 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 seguir esta ruta todo el tiempo.

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

Siempre uso una marca de tiempo también para evitar que los navegadores almacenen en caché la imagen. Por ejemplo, si el usuario está rotando su avatar, a menudo se almacenará en caché y parecerá que no cambia.

var d = new Date();
var t = d.getTime();

$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");