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

Question

Je crée une table de taux d'appel pour développer / réduire la société pour laquelle je travaille. J'ai actuellement une table avec un bouton en dessous pour l'agrandir, le bouton dit "Expand". Il est fonctionnel, sauf que j'ai besoin du bouton pour passer à "Réduire" quand il est cliqué et puis bien sûr de nouveau à "Développer" quand il est cliqué à nouveau. 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.

Answer 1

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

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

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

Answer 2

Personnellement, je voudrais juste utiliser le code JavaScript pour basculer entre les 2 classes.

La CSS décrire tout ce dont vous avez besoin sur votre div MOINS le fond de la règle, puis ajouter deux classes (e.g: élargi et s'est effondré) que les règles de chacun avec la bonne image d'arrière-plan (ou de fond si vous utilisez un sprite).

CSS avec des images différentes

.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 l'image sprite

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

.expanded {background-position: left bottom;}

Alors...

Code JavaScript avec des images

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

JavaScript avec du sprite

Remarque: l'élégant toggleClass ne fonctionne pas dans Internet Explorer 6, mais au-dessous de addClass/removeClass méthode fonctionnera très bien dans ce genre de situation

La solution la plus élégante (malheureusement pas Internet Explorer 6 de l'environnement)

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

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

Comme je sais que cette méthode de travail à travers les navigateurs, et je me sentirais beaucoup plus à l'aise de jouer avec les CSS et les classes qu'avec les changements de l'URL dans le script.

Answer 3

Il existe deux façons de modifier une image de fond CSS 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 la seconde, vous pouvez utiliser des CSS classiques et enchaîner plusieurs propriétés CSS ensemble.

Answer 4

Si vous utilisez une image-objet CSS pour les images d'arrière-plan, vous pouvez augmenter le décalage d'arrière-plan de +/- n pixels en fonction de l'expansion ou de la réduction. Pas une bascule, mais plus proche que d'avoir à changer d'URL d'image de fond.

Answer 5

Une façon de le faire est de mettre les deux images dans le HTML, dans un SPAN ou un DIV, vous pouvez cacher le défaut soit avec CSS, ou avec JS sur le chargement de la page. Ensuite, vous pouvez activer 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>