Changer une image d'arrière-plan DIV avec jQuery

Je crée un tableau des taux d'appels pour développer / réduire pour l'entreprise pour laquelle je travaille. J'ai actuellement une table avec un bouton en dessous pour le développer, le bouton dit "Expand". Il est fonctionnel, sauf que j'ai besoin du bouton pour passer à "Réduire" quand il est cliqué, puis bien sûr revenir à "Développer" quand il est à nouveau cliqué. L'écriture sur le bouton est une image de fond.

Donc, fondamentalement, tout ce dont j'ai besoin est de changer l'image d'arrière-plan d'un div quand il est cliqué, sauf un peu comme une bascule.

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

Devrait faire l'affaire, il suffit de le brancher dans un événement de clic sur l'élément

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

Personnellement, j'utiliserais simplement le code JavaScript pour basculer entre 2 classes.

Demandez au CSS de décrire tout ce dont vous avez besoin sur votre div MOINS la règle d'arrière-plan, puis ajoutez deux classes (par exemple: développées et réduites) en tant que règles avec chacune l'image d'arrière-plan correcte (ou la position d'arrière-plan si vous utilisez un sprite).

CSS avec différentes images

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

Ou CSS avec image-sprite

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

.expanded {background-position: left bottom;}

Ensuite...

Code JavaScript avec images

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

JavaScript avec sprite

Remarque: l'élégant toggleClass ne fonctionne pas dans Internet Explorer 6, mais la méthode ci addClass- dessous / removeClassfonctionnera bien dans cette situation également

La solution la plus élégante (malheureusement pas compatible avec 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');
            }
        });
    }

Pour autant que je sache, cette méthode fonctionnera sur tous les navigateurs, et je me sentirais beaucoup plus à l'aise avec le CSS et les classes qu'avec les changements d'URL dans le script.

Il existe deux façons différentes de modifier une image CSS d'arrière-plan avec jQuery.

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

Regardez attentivement pour noter les différences. Dans le second, vous pouvez utiliser le CSS conventionnel et chaîne plusieurs propriétés CSS ensemble.

Si vous utilisez un sprite CSS pour les images d'arrière-plan, vous pouvez augmenter le décalage d'arrière-plan de +/- n pixels selon que vous étiez en train de développer ou de réduire. Pas une bascule, mais plus proche que d'avoir à changer d'URL d'image d'arrière-plan.

Voici comment je le fais:

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

Une façon de le faire est de mettre les deux images dans le HTML, à l'intérieur d'un SPAN ou DIV, vous pouvez masquer la valeur par défaut soit avec CSS, soit avec JS au chargement de la page. Ensuite, vous pouvez basculer sur le clic. Voici un exemple similaire que j'utilise pour mettre des icônes gauche / bas sur une liste:

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

Cela fonctionne sur tous les navigateurs actuels sur WinXP. Fondamentalement, il suffit de vérifier quelle est l'image d'arrière-plan actuelle. Si c'est image1, montrez image2, sinon montrez image1.

Le truc jsapi charge juste jQuery à partir du CDN Google (plus facile pour tester un fichier divers sur le bureau).

Le remplacement est pour la compatibilité entre les navigateurs (opéra et ie ajouter des citations à l'url et firefox, chrome et safari supprimer les citations).

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

Le mien est animé:

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

J'ai fait le mien en utilisant des expressions régulières, car je voulais conserver un chemin relatif et ne pas utiliser ajouter la fonction addClass. Je voulais juste le compliquer, 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);
                }
            }
        );

Ancien article, mais cela vous permettrait d'utiliser un sprite d'image et d'ajuster la répétition ainsi que le positionnement en utilisant le raccourci pour la propriété css (arrière-plan, répétition, en haut à gauche).

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

});

J'ai trouvé une solution dans un forum, Toggle Background Img .

Les sprites CSS fonctionnent mieux. J'ai essayé de changer de classe et de manipuler la propriété 'background-image' avec jQuery, aucune n'a fonctionné. Je pense que c'est parce que les navigateurs (au moins le dernier Chrome stable) ne peuvent pas "recharger" une image déjà chargée.

Bonus: les sprites CSS sont plus rapides à télécharger et plus rapides à afficher. Moins de requêtes HTTP signifie un chargement de page plus rapide. Réduire le nombre de HTTP est le meilleur moyen d'améliorer les performances frontales, je recommande donc de suivre cette voie tout le temps.

Il s'agit d'une réponse assez simple qui modifie l'arrière-plan du site avec une liste d'éléments

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

J'utilise toujours également un horodatage pour empêcher les navigateurs de mettre l'image en cache. Par exemple, si l'utilisateur fait tourner son avatar, il sera souvent mis en cache et semblera ne pas changer.

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

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