Wechseln eines DIV-Hintergrundbilds mit jQuery

Ich erstelle eine Tabelle mit Anrufraten zum Erweitern / Reduzieren für das Unternehmen, für das ich arbeite. Ich habe derzeit eine Tabelle mit einer Schaltfläche darunter, um sie zu erweitern. Auf der Schaltfläche steht "Erweitern". Es ist funktionsfähig, außer dass ich die Schaltfläche brauche, um beim Klicken auf "Reduzieren" und beim erneuten Klicken natürlich wieder auf "Erweitern" zu wechseln. Die Schrift auf der Schaltfläche ist ein Hintergrundbild.

Im Grunde muss ich nur das Hintergrundbild eines Div ändern, wenn es angeklickt wird, außer wie ein Umschalter.

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

Wenn Sie den Trick ausführen möchten, schließen Sie ihn einfach in einem Klickereignis an das Element an

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

Ich persönlich würde nur den JavaScript-Code verwenden, um zwischen zwei Klassen zu wechseln.

Lassen Sie das CSS alles skizzieren, was Sie auf Ihrem div MINUS als Hintergrundregel benötigen, und fügen Sie dann zwei Klassen (z. B. erweitert und reduziert) als Regeln mit jeweils dem richtigen Hintergrundbild (oder der Hintergrundposition bei Verwendung eines Sprites) hinzu.

CSS mit verschiedenen Bildern

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

Oder CSS mit Image Sprite

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

.expanded {background-position: left bottom;}

Dann...

JavaScript-Code mit Bildern

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

JavaScript mit Sprite

Hinweis: Die elegante toggleClass funktioniert in Internet Explorer 6 nicht, aber die folgende addClass/ removeClassMethode funktioniert auch in dieser Situation einwandfrei

Die eleganteste Lösung (leider nicht Internet Explorer 6-freundlich)

$(function){
        $('#button').click(function(){
            $(this).toggleClass('expanded');
        });
    }

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

Soweit ich weiß, funktioniert diese Methode in allen Browsern, und ich würde mich beim Spielen mit CSS und Klassen viel wohler fühlen als bei URL-Änderungen im Skript.

Es gibt zwei verschiedene Möglichkeiten, ein Hintergrundbild-CSS mit jQuery zu ändern.

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

Achten Sie genau auf die Unterschiede. Im zweiten Schritt können Sie herkömmliches CSS verwenden und mehrere CSS-Eigenschaften miteinander verknüpfen.

Wenn Sie ein CSS-Sprite für die Hintergrundbilder verwenden, können Sie den Hintergrundversatz um +/- n Pixel erhöhen, je nachdem, ob Sie expandieren oder reduzieren. Kein Umschalten, aber näher dran, als die URLs von Hintergrundbildern wechseln zu müssen.

So mache ich das:

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

Eine Möglichkeit, dies zu tun, besteht darin, beide Bilder im HTML-Code in einem SPAN oder DIV abzulegen. Sie können die Standardeinstellung entweder mit CSS oder mit JS beim Laden der Seite ausblenden. Dann können Sie auf Klick umschalten. Hier ist ein ähnliches Beispiel, mit dem ich linke / untere Symbole in eine Liste einfüge:

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

Dies funktioniert in allen aktuellen Browsern unter WinXP. Grundsätzlich nur überprüfen, was das aktuelle Backgrond-Bild ist. Wenn es Bild1 ist, zeigen Sie Bild2, andernfalls zeigen Sie Bild1.

Das jsapi-Zeug lädt nur jQuery vom Google CDN (einfacher zum Testen einer anderen Datei auf dem Desktop).

Das Ersetzen dient der browserübergreifenden Kompatibilität (Oper und dh Anführungszeichen zur URL hinzufügen und Anführungszeichen für Firefox, Chrome und Safari entfernen).

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

Meins ist animiert:

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

Ich habe reguläre Ausdrücke verwendet, da ich einen relativen Pfad beibehalten und nicht die Funktion addClass hinzufügen wollte. Ich wollte es nur verschlungen machen, 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);
                }
            }
        );

Alter Beitrag, aber dies würde es Ihnen ermöglichen, ein Bild-Sprite zu verwenden und die Wiederholung sowie die Positionierung anzupassen, indem Sie die Kurzform für die CSS-Eigenschaft verwenden (Hintergrund, Wiederholung, links oben).

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

});

Ich habe eine Lösung in einem Forum gefunden, Toggle Background Img .

CSS Sprites funktionieren am besten. Ich habe versucht, Klassen zu wechseln und die Eigenschaft 'background-image' mit jQuery zu bearbeiten. Es hat jedoch nicht funktioniert. Ich denke, das liegt daran, dass die Browser (zumindest das neueste stabile Chrome) ein bereits geladenes Bild nicht "neu laden" können.

Bonus: CSS-Sprites können schneller heruntergeladen und angezeigt werden. Weniger HTTP-Anforderungen bedeuten ein schnelleres Laden der Seite. Das Reduzieren der Anzahl von HTTP ist der beste Weg, um die Front-End-Leistung zu verbessern. Ich empfehle daher, diese Route immer zu wählen.

Dies ist eine ziemlich einfache Antwort, die den Hintergrund der Site mit einer Liste von Elementen ändert

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

Ich verwende immer auch einen Zeitstempel, um zu verhindern, dass Browser das Bild zwischenspeichern. Wenn der Benutzer beispielsweise seinen Avatar dreht, wird er häufig zwischengespeichert und scheint sich nicht zu ändern.

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

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