Rempacement image-background qui ne se fait pas par JS
Bonjour,
J'ai une structure de base :
Citation:
/index.html
/css/styles.css
/scriptsjs/index.js
/images/play.png
/images/pause.png
avec :
index.html :
Code:
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:
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:
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:
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:
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 !
