Obligé de cliquer deux fois pour changer l'image background
Bonjour, j'ai un petit site sur un Arduino via le shield ethernet avec des images boutons qui sont chargés par le CSS en background d'un div
Mais seulement je voudrais pouvoir changer l'image (rouge ou vert) selon l'état du bouton.
J'ai trouvé un exemple sur internet qui fonctionne très bien:
https://codepen.io/mikacontact/pen/ZXxgGY
mais que je n'arrive pas à le faire fonctionner:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <!DOCTYPE html>
<html>
<head>
<title>Arduino Ajax I/O</title>
<link rel="stylesheet" href="test3css.css" type="text/css" />
<link rel="shortcut icon" href="cloud.ico" /><!-- icône à choisir-->
<script>
(function() {
var tabLinks = document.querySelectorAll(".link"),
i = 0,
maxLoop = tabLinks.length;
for (i; i < maxLoop; i++) {
tabLinks[i].addEventListener("click", function(event) {
//ternaire
event.target.parentNode.className === "styleOne" ?
event.target.parentNode.className = "styleTwo" :
event.target.parentNode.className = "styleOne" ;
})
}
})()
function GetButton2()
{
if (LED4_state === 1) {
LED4_state = 0;
strLED4 = "&LED4=0";
}
else {
LED4_state = 1;
strLED4 = "&LED4=1";
}
}
</script>
</head>
<body onload="GetArduinoIO()">
<h1>Arduino Ajax I/O</h1>
<div class="red">
<div id="slatenav">
<ul>
<li><a href="index.htm" title="Page d'accueil" >Accueil</a></li>
<li><a href="ajax_io.htm" title="Ajax Inputs/Outputs" class="current">Interrupteurs/Relais</a></li>
<li><a href="gauges.htm" title="Cadrans">Cadrans</a></li>
<li><a href="http://www.13styles.com/css-menus/slate/" title="css menus">Our Work</a></li>
<li><a href="http://www.13styles.com/css-menus/slate/" title="css menus">Contact Us</a></li>
</ul>
</div>
</div>
<div class="styleOne"><a class="link" href="#">Click me1</a></div>
<div class="styleOne"><a class="link" href="#">Click me2</a></div>
<div class="styleOne"><a class="link" href="#">Click me3</a></div>
<div class="styleOne"><a class="link" href="#">Click me4</a></div>
</body>
</html> |
et le
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
| body {
background:#aaa url(grid.png) center top repeat;
margin: auto;
padding: auto;
}
img.image{
display: block;
margin-left: auto;
margin-right: auto
}
h1
{
font-size: 20px;
/*font-style: italic;*/
font-family: "Arial Black", Arial, Verdana, serif;
text-align: center;
color: black;
}
/* ---------------------- Redslate nav ---------------------- */
.red #slatenav{position:relative;display:block;height:42px;font-size:12px;font-weight:bold;background:transparent url(rd.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(rd2.gif) no-repeat top center;}
/* ---------------------- END Redslate nav ---------------------- */
.IO_box {
float: left;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 120px;
}
.bouton_box {
float: left;
margin: 0 20px 20px 0;
border: 2px solid yellow;
padding: 0 5px 0 5px;
width: 200px;
}
h2 {
font-size: 85%;
color: #5734E6;
margin: 5px 0 5px 0;
}
p, form, button {
font-size: 80%;
color: #252525;
}
.small_text {
font-size: 70%;
color: #737373;
}
.IO_box2 a {
float:left;
margin: 0 20px 20px 0;
display:block;
width:200px;
line-height:50px;
text-align:center;
vertical-align:middle;
background:url(bouton1.png) no-repeat;
color:white;
text-decoration:none;
/*float:left;
/*margin:2px;*/
}
.styleOne {
background-image: url('http://www.lasantedemonchat.fr/www.lasantedemonchat.fr/uploads/2016/07/ArriveChaton-300x200.jpg');
background-repeat: no-repeat;
background-position: left center;
width: 250px;
height: 150px;
}
.link{text-decoration:none; color: #00F;}
.link:hover{text-decoration:underline; color: #F00;}
.styleTwo {
background-image: url('http://www.biofan.com/blog/wp-content/uploads/2016/07/462-FR-Chaton-a-donner_comment-re%CC%81ussir-une-adoption-4-300x200.jpg');
background-repeat: no-repeat;
background-position: left center;
width: 250px;
height: 150px; |
ça marche pas donc j'ai fait comme çà
Code:
<div class="styleOne"><a class="link" href="#" onClick="change3()">Click me3</a></div>
et comme ceci en javascript:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| function change3() {
var tabLinks = document.querySelectorAll(".link"),
//var test = event.target.parentNode.className;
i = 0,
maxLoop = tabLinks.length;
//alert(maxLoop);
//alert("je suis dans function change3");
for (i; i < maxLoop; i++) {
//alert("je suis dans function et dans le for 3");
//alert(test);
tabLinks[i].addEventListener("click", function(event) {
//ternaire
event.target.parentNode.className === "styleOne" ?
event.target.parentNode.className = "styleTwo" :
event.target.parentNode.className = "styleOne" ;
})
}
} |
Et là ça fonctionne mais je suis obligé de cliquer deux fois pour que l'image soit changée: à chaque fois à la deuxième exécution de la fonction change3()
Je ne pense pas être très loin du résultat escompté mais je bloque, d'autant plus que ce ne sont pas mes langages préférés...
ne fonctionne toujours pas sur la tablette
Merci de prendre du temps à la résolution de mon problème.
Mais même avec les corrections apportées, la tablette ne veut rien savoir et ne change pas d'image de fond de mon "bouton".
Je pensais que ça devait être assez simple de mettre du vert dans un lien/bouton et d'y mettre du rouge quand celui-ci a été cliqué/activé
Tout simplement le même principe que le décroché/raccroché des smartphones...
Soit-dit en passant, j'ai toujours cru que Victor Hugo utilisait du javascript dans son roman "Notre Dame des cendres" de 1841... ;)
Ou autrement alors en utilisant des class, on pourrait selon le getElementById, choisir une class plutôt qu'une autre avec un background différent l'une de l'autre.
C'est l'esprit du premier exemple cité plus haut mais qui ne fonctionne pas au copié/collé.
Quelle serait la solution la plus simple ?
p.s : pourquoi je n'arrive plus à uploader des fichiers sur ce forum (Error#2038)
