Rempacement image-background qui ne se fait pas par JS

**alt184** · 30/03/2023, 10h31

Bonjour,
J'ai une structure de base :

/index.html
/css/styles.css
/scriptsjs/index.js
/images/play.png
/images/pause.png

avec :

index.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="fr">
<link href="./css/styles.css" rel="stylesheet" />
<script type="text/javascript" src="./scriptsjs/index.js"></script>
<body>
    <button id="playStop" name="button" class="bouton boutonPlayStop" onclick="changerBoutonPlayStop();"></button>
</body>
</html>

styles.css :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
:root {
    --URL_IMAGE_PAUSE : url(./../images/pause.png);
    --URL_IMAGE_PLAY : url(./../images/play.png);
}
 
main {
    display: flex;
    justify-content: center;
}
 
.bouton {
    height: 55px;
    width: 55px;
    background-position: center; 
    background-repeat: no-repeat;
    background-size: 45px 45px;
}
 
.boutonPlayStop {
    background-image: var(--URL_IMAGE_PLAY) ;
}

et index.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function changerBoutonPlayStop() {
    const boutonPlayStop = document.getElementById("playStop");
    boutonPlayStop.setAttribute("style", "background-image:var(--URL_IMAGE_PAUSE)");
}

Hélas, ça ne marche pas...
Lorsque je clique sur le bouton "play", l'image du bouton play disparaît, je ne vois aucune erreur dans l'outil de développement de FF, mais pas de remplacement de l'image (background-image) par "pause".
Par contre je vois une chose étrange que je ne comprends pas : j'ai

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.boutonPlayStop {
  background-image: var(--URL_IMAGE_PLAY);
}

qui est barré :
~~background-image: var(--URL_IMAGE_PLAY);~~
et un nouveau bloc apparaît au-dessus intitulé "élément" noté "inline" :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
élément {
  background-image: var(--URL_IMAGE_PAUSE);
}

C'est la première fois que j'utilise ce genre de syntaxe, j'imagine que j'ai loupé une marche...
Merci pour votre aide !

**mathieu** · 30/03/2023, 13h52

c'est bizarre, j'ai essayé votre code et il fonctionne directement, j'ai bien la nouvelle image qui apparait sur le bouton.
pouvez vous mettre tout ça en ligne et nous donner l'url pour qu'on voit exactement le souci ?

Envoyé par alt184

qui est barré :
~~background-image: var(--URL_IMAGE_PLAY);~~
et un nouveau bloc apparaît au-dessus intitulé "élément" noté "inline" :

c'est normal, la ligne barrée signifie que cette directive n'est pas appliquée. et dans ce cas, c'est parce que la directive qui est dans "style" a une plus haute priorité donc c'est bien le résultat que vous souhaitez.

**alt184** · 30/03/2023, 14h00

Merci pour le retour positif. Bizarre en effet, chez moi ça ne donne rien !

Où est-ce que je peux mettre ça en ligne sinon ??

**alt184** · 30/03/2023, 14h18

Je pense qu'il y a un problème de chemins.

Si je change le chemin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

--URL_IMAGE_PAUSE : url(./../images/pause.png)

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

--URL_IMAGE_PAUSE : url(./images/pause.png)

ça marche !

Autrement dit, le fait de faire le changement de style dans le javascript fait qu'il faut considérer qu'on est dans le fichier html et non dans le CSS... Ça confirme ce que j'ai lu par ailleurs.

On ne peut visiblement pas utiliser des url/chemins définis dans le CSS directement dans le javascript sans les modifier si c'est en adressage relatif.
J'imagine qu'il faut que je contourne le problème en mettant toutes les variables dans le fichier js et en initialisant mon image (play) dans le js aussi lorsque je charge la page, plutôt que via le CSS...

Est-ce que ça vous paraît OK ?

**NoSmoking** · 30/03/2023, 18h50

Bonjour,

Autrement dit, le fait de faire le changement de style dans le javascript fait qu'il faut considérer qu'on est dans le fichier html et non dans
le CSS... Ça confirme ce que j'ai lu par ailleurs.

comme quoi on ne trouve pas que des âneries sur la toile

Ceci étant effectivement entre initialisation et l'utilisation il y a changement de niveau, si t ne veux pas en être tributaire tu peux toujours passer en chemin absolu.

L'autre solution pour ton utilisation est de faire simple, j'entends par là utiliser les classes CSS et affecter/supprimer une classe en fonction du besoin, tu n'auras pas ce problème.

Exemple CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.btn-pause {
  background-image: url(../images/pause.png);
}
.btn-play {
  background-image: url(../images/play.png);
}

ton code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id="playStop" name="button" class="bouton btn-play" onclick="changerBoutonPlayStop();"></button>

et ton code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function changerBoutonPlayStop() {
  const boutonPlayStop = document.getElementById("playStop");
  boutonPlayStop.classList.toggle("btn-play");
  boutonPlayStop.classList.toggle("btn-pause");
}

Au passage, plutôt que de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

boutonPlayStop.setAttribute("style", "background-image:var(--URL_IMAGE_PAUSE)");

il est préférable de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

boutonPlayStop.style.setProperty("background-image", "var(--URL_IMAGE_PAUSE)")

ainsi tu ne détruis pas le styleInline éventuel.

Ici l'utilisation des variables CSS ne t'apporte rien.

**alt184** · 31/03/2023, 09h21

Merci pour cette réponse instructive !
Je me demande si jongler avec les classes est vraiment une bonne chose. Je veux dire par là que personnellement, l'idée ne me plaît pas, même si ça reste relativement simple à mettre en œuvre et assez léger dans cet exemple (au passage, je note l'emploi de toggle que je ne connaissais pas du tout !).

J'ai résolu mon problème en déportant la question de l'affichage des images initiales et finales dans le javascript. Je me suis dit que vu que tout était géré en javascript pour cette partie de l'application, avec un recours incessant à lui dès qu'on clique sur le bouton play/pause, ça n'était pas forcément mal que de lui faire gérer aussi l'affichage initial (ici je raisonne en termes de : affichage initiale/géré par CSS et HTML vs utilisation de l'application après interactions avec l'utilisateur/géré par tout+javascript).
Le seul point délicat est l'ordre de chargement des fichiers : si on met le js comme dans l'exemple avant le chargement du html plus bas, on ne peut pas initialiser la page avec le js car on fait appel à des objets qui ne sont pas encore créés/connus par la machine. J'ai donc ajouter un "defer" lors du chargement du fichier js.

Pour ce qui est de la différence entre setAttribute et setProperty, je suis en train de regarder ça en détail. Ces différences sont pour moi encore un peu nébuleuses et subtiles, notamment la distinction attributs HTML / propriétés du DOM, même si je vois bien les grandes lignes. Toute référence sur le sujet comme des articles de blog ou des cours en ligne sera très appréciable

...

**mathieu** · 31/03/2023, 12h28

Envoyé par alt184

Je me demande si jongler avec les classes est vraiment une bonne chose.

c'est le but des classes css de regrouper des informations sur l'état d'une balises. imaginons que le bouton "pause" ait une autre image de fond, une autre couleur de bordure et des bords plus arrondis. si vous faites ces modifications en javascript vous avez besoin de 3 lignes de code.
et si dans 3 mois vous voulez changez la couleur de la bordure, vous allez devoir retrouver où est cette couleur dans le code javascript alors qu'il est plus simple de chercher la classe "bouton_pause" dans le code css.
et si votre code css vous parait confus, je vous conseille de vous aider de less css, c'est une version allégée de scss :
https://lesscss.org/

Envoyé par alt184

Le seul point délicat est l'ordre de chargement des fichiers : si on met le js comme dans l'exemple avant le chargement du html plus bas, on ne peut pas initialiser la page avec le js car on fait appel à des objets qui ne sont pas encore créés/connus par la machine. J'ai donc ajouter un "defer" lors du chargement du fichier js.

vous pouvez utiliser l'évènement "DOMContentLoaded" pour gérer cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.addEventListener("DOMContentLoaded", e => {
    // ici les balises sont toutes chargées
});

Envoyé par alt184

Pour ce qui est de la différence entre setAttribute et setProperty, je suis en train de regarder ça en détail. Ces différences sont pour moi encore un peu nébuleuses et subtiles, notamment la distinction attributs HTML / propriétés du DOM, même si je vois bien les grandes lignes. Toute référence sur le sujet comme des articles de blog ou des cours en ligne sera très appréciable

...

le "setProperty" est appliqué à l'objet "style" et alors que "setAttribute" s'applique à une balise :
https://developer.mozilla.org/fr/doc...LElement/style

**alt184** · 31/03/2023, 14h23

Eh bien en fait, j'ai changé une nouvelle fois et je suis passé aux classes !
En effet, avec la solution du js, je dois déclarer une variable booléenne globale qui indique quel est l'état (play ou pause), et pour la rendre non globale, il existe bien des solutions à ce que j'ai vu (le pattern module par exemple) mais ça complique ce qui est pour l'instant un simple exercice !
J'ai vu que l'utilisation de multiples classes était assez répandu en fait, donc pourquoi pas ?...

Mon code CSS ne me paraît pas du tout confus, c'est juste que je ne veux pas ajouter des choses inutiles, ce qui n'est pas le cas ici.
Je connais l'existence de ces pré-processeurs, mais je n'ai pas envie pour le moment d'une nouvelle syntaxe à apprendre, et encore moins de devoir ajouter un étage de compilation. Le fait de pouvoir modifier à la volée ou presque CSS, HTML et JS me convient bien !

Merci pour le dernier lien, je vais regarder ça attentivement.

Rempacement image-background qui ne se fait pas par JS

JavaScript

Discussions similaires

Partager

Partager