Bonjour,
J'ai une structure de base :
avec :/index.html
/css/styles.css
/scriptsjs/index.js
/images/play.png
/images/pause.png
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 :
Hélas, ça ne marche pas...
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)"); }
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
qui est barré :
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 .boutonPlayStop { background-image: var(--URL_IMAGE_PLAY); }
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 !
Partager