Cambiare un'immagine di sfondo DIV con jQuery

Sto creando una tabella dei tassi di chiamata per espandere / comprimere l'azienda per cui lavoro. Al momento ho una tabella con un pulsante sotto per espanderlo, il pulsante dice "Espandi". È funzionale, tranne per il fatto che ho bisogno del pulsante per passare a "Comprimi" quando si fa clic e, naturalmente, di nuovo a "Espandi" quando si fa nuovamente clic. La scritta sul pulsante è un'immagine di sfondo.

Quindi praticamente tutto ciò di cui ho bisogno è cambiare l'immagine di sfondo di un div quando viene cliccato, tranne una sorta di interruttore.

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

Dovresti fare il trucco, basta collegarlo in un evento click sull'elemento

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

Personalmente userei semplicemente il codice JavaScript per passare tra 2 classi.

Chiedi al CSS di delineare tutto ciò di cui hai bisogno sul tuo div MENO la regola di sfondo, quindi aggiungi due classi (ad esempio: espanso e compresso) come regole ognuna con l'immagine di sfondo corretta (o la posizione di sfondo se usi uno sprite).

CSS con immagini diverse

.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 di immagini

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

.expanded {background-position: left bottom;}

Poi...

Codice JavaScript con immagini

$(function){
    $('#button').click(function(){
        if($(this).hasClass('expanded'))
        {
            $(this).addClass('collapsed').removeClass('expanded');
        }
        else
        {
            $(this).addClass('expanded').removeClass('collapsed');
        }
    });
}

JavaScript con sprite

Nota: l'elegante toggleClass non funziona in Internet Explorer 6, ma il metodo sottostante addClass/ removeClassfunzionerà bene anche in questa situazione

La soluzione più elegante (purtroppo non compatibile 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');
            }
        });
    }

Per quanto ne so questo metodo funzionerà attraverso i browser e mi sentirei molto più a mio agio giocando con CSS e classi che con le modifiche all'URL nello script.

Esistono due modi diversi per modificare un'immagine CSS di sfondo con jQuery.

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

Guarda attentamente per notare le differenze. Nel secondo, è possibile utilizzare CSS convenzionali e mettere insieme più proprietà CSS.

Se usi uno sprite CSS per le immagini di sfondo, potresti aumentare l'offset di sfondo +/- n pixel a seconda che tu stia espandendo o collassando. Non un interruttore, ma più vicino ad esso che dover cambiare gli URL delle immagini di sfondo.

Ecco come lo faccio:

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

Un modo per farlo è inserire entrambe le immagini in HTML, all'interno di uno SPAN o DIV, è possibile nascondere il valore predefinito con CSS o con JS al caricamento della pagina. Quindi puoi attivare / disattivare il clic. Ecco un esempio simile che sto usando per mettere le icone sinistra / giù in un elenco:

$(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>

Funziona su tutti i browser attuali su WinXP. Fondamentalmente solo controllando quale sia l'attuale immagine di backgrond. Se è image1, mostra image2, altrimenti mostra image1.

Il materiale jsapi carica jQuery dal CDN di Google (più semplice per testare un file misc sul desktop).

Il sostituto è per la compatibilità tra browser (opera e cioè aggiungere citazioni a url e firefox, chrome e safari rimuovere le virgolette).

<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>

Il mio è animato:

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

Ho fatto il mio usando espressioni regolari, poiché volevo preservare un percorso relativo e non usare aggiungere la funzione addClass. Volevo solo renderlo contorto, lol.

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

Vecchio post, ma ciò ti consentirebbe di utilizzare uno sprite di immagini e regolare la ripetizione e il posizionamento utilizzando la scorciatoia per la proprietà css (sfondo, ripetizione, in alto a sinistra).

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

});

Ho trovato una soluzione in un forum, Toggle Background Img .

Gli Sprite CSS funzionano meglio. Ho provato a cambiare classe e manipolare la proprietà 'background-image' con jQuery, nessuno ha funzionato. Penso che sia perché i browser (almeno l'ultimo Chrome stabile) non possono "ricaricare" un'immagine già caricata.

Bonus: gli Sprite CSS sono più veloci da scaricare e più veloci da visualizzare. Meno richieste HTTP significano un caricamento più veloce della pagina. Ridurre il numero di HTTP è il modo migliore per migliorare le prestazioni del front-end, quindi ti consiglio di seguire questa strada continuamente.

Questa è una risposta abbastanza semplice che modifica lo sfondo del sito con un elenco di elementi

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

Uso sempre anche un timestamp per impedire ai browser di memorizzare nella cache l'immagine. Ad esempio, se l'utente sta ruotando il proprio avatar, spesso viene memorizzato nella cache e sembra non cambiare.

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

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