Comment changer l'image d'arrière-plan d'une DIV en jQuery ?
JavaScript avec jQuery permet de changer l'image en arrière-plan d'une division.
Il est possible en JavaScript d'effectuer n'importe quel type de traitement sur la mise en forme de la page. On peut par exemple changer l'image en arrière-plan d'une division. Cette facilité de développement est renforcée grâce à la bibliothèque jQuery qui fournit des méthodes permettant de changer facilement les styles de mise en forme d'un élément (lire aussi l'article introductif: Comment créer un élément div en jQuery ?).
La méthode css() permet de modifier la valeur de la propriété CSS d'un élément passé en paramètre. On peut donc s'en servir pour changer l'image de fond d'une division :
$(#maDivision).css(background-image, url(/monImage.png));
Si les images de fond doivent être réutilisées plus tard, on peut avoir recours aux classes CSS. Il y a deux solutions. La première est d'associer chaque fond à une classe CSS différente. On utilisera alors les méthodes addClass() et removeClass() pour changer l'image de fond, par exemple lors d'un événement click. La deuxième solution consiste à attribuer à l'élément une image de fond quand il n'a pas de classe et à utiliser une classe pour la deuxième image de fond. On utilisera la méthode toggleClass() qui permet d'ajouter une classe CSS sur un élément quand celle-ci est absente, ou au contraire de l'enlever quand elle est déjà présente. Solution avec deux classes :
.classe1 { background-image: url(/image1.png); }
.classe2 { background-image: url(/image2.png); }
$(#maDivision).addClass(classe2).removeClass(classe1); //Méthode pour passer de la classe 1 à la classe 2
Solution avec une seule classe
#maDivision { background-image: url(/image1.png); }
.classe2 { background-image: url(/image2.png); }
$(#maDivision).toggleClass(classe2); //Méthode utilisée pour changer l'image de fond