Bonjour à tous,

Me revoilà avec mes boutons et mes leds !

Tout fonctionne parfaitement, et je comprends a peu prêt ce que je fais !

Je cherche un conseil pour faire une petite action, et poser une question de faisabilité.

Commençons par la question :
Je n'ai pas trouvé, alors je me demande si c'est possible, de reconnaitre un bouton "pressé" d'un bouton "relaché" ? genre "onpress" et "onrelease" ; Mon but est donc d'allumer une led tant que le bouton est appuyé et que la led s’éteigne quand le bouton est relâché.

Pour la petite action.

J'ai donc deux boutons par led un rouge pour "off" et un vert pour "on".
Je souhaiterais que quand la led est allumée le bouton "ON" soit plus foncé et le bouton "OFF" soit bien visible, car comme la led est allumée la seule action possible c'est de l'éteindre.
et vice versa quand la led est éteinte, le bouton "ON" bien visible et le bouton "OFF" plus sombre.

- A/ Dois-je créer deux images boutons "on" et "off" l'un sombre et l'autre clair, les mettre dans le html , et sélectionner celui qui s'affiche.
- B/ Dois-je créer une classe pour le bouton "on" clair et une autre pour le "on" sombre par exemple et appliquer la classe quand je clic ?
- La réponse "D"

Merci

JE vous remets mon code ici

Code HTML : 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
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
		<link href="style.css" rel="stylesheet" media="screen" type="text/css"> 
		<title>Commande LED</title>
    </head>
 
    <body>
 
		<h1 id="titre" style='text-align:center;'>Serveur de Jérémy</h1>
 
		<table align="center">
			<tr height:100px>
				<td>
					<table class="ta_BP">
						<tr>
							<td class="td_txt" >La LED VERTE est <span id="id-etat-ledv">---</span></td>
							<td style="text-align:left;" ><img id="imageLedVon" src="images/led_v_on.png"><img id="imageLedVoff" src="images/led_v_off.png"></td>
						</tr>
 
						<tr>
							<td width=300px style="text-align:center;" colspan=2 >
								<button class="bouton_on"  onclick="BoutonLED1on()">ON </button>
								<button class="bouton_off" onclick="BoutonLED1off()">OFF</button>
							</td>
						</tr>	
					</table>
				</td>
				<td width=50px;> </td>
				<td>
					<table align="center" style="border:2pt solid red;"  >
						<tr>
							<td class="td_txt">La LED BLEUE est <span id="id-etat-ledb">-</span></td>
							<td style="text-align:left;" ><img id="imageLedBon"src="images/led_v_on.png"><img id="imageLedBoff" src="images/led_v_off.png"></td>
						</tr>
 
						<tr>
							<td class="td_BP" colspan=2>
								<button class="bouton_on"  onclick="BoutonLED2on()">ON </button>
								<button class="bouton_off" onclick="BoutonLED2off()">OFF</button>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
 
 
 
		<script type="text/javascript">
                
                        function viewImage(id,etat) {
                document.getElementById(id).innerHTML=etat;
            }
 
                        function BoutonLED1on() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED1=1', true);
                xhttp.send();
            }
                        function BoutonLED1off() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED1=0', true);
                xhttp.send();
            }
                        function BoutonLED2on() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED2=1', true);
                xhttp.send();
            } 
                        function BoutonLED2off() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", 'consignes.php?E_LED2=0', true);
                xhttp.send();
            }                   
 
                        //-------------------------------------------------------------------------------
                        /*Met à jour l'état des LEDs  toutes les 0.5 secondes */              
                        function MAJLedV() {
                                
                                const idTextLed1 = document.getElementById("id-etat-ledv"); // je défini l'endroirt du texte que je dois remplacer par son ID
                const requete_LEDV = new XMLHttpRequest();
                                requete_LEDV.open("GET", "/etatLED1.php", true);
                                requete_LEDV.send();
                                requete_LEDV.addEventListener("load", () => {
                                        idTextLed1.textContent = requete_LEDV.responseText ;
                                        
                                        if (requete_LEDV.responseText.includes("éteinte")) {
                                        imageLedVon.style.display ='none';
                                                imageLedVoff.style.display ='inline';
                                        } else if (requete_LEDV.responseText.includes("allumée")) {
                                                imageLedVon.style.display ='inline';
                                                imageLedVoff.style.display ='none';
                                        }
                                    setTimeout( MAJLedV, 500 )  
                                })                                                                      
                        }                       
                        MAJLedV()  // je repete l'opération toute les 0.5 secondes
 
                        function MAJLedB() {
                                
                                const idTextLed2 = document.getElementById("id-etat-ledb"); // je défini l'endroirt du texte que je dois remplacer par son ID
                                const requete_LEDB = new XMLHttpRequest();  // Je créer un objet de type requete
                                requete_LEDB.open("GET", '/etatLED2.php', true);  // je constitue ma requete
                requete_LEDB.send();  // j'envoie ma requete            
                                requete_LEDB.addEventListener("load", () => {  // à la reception de la réponse du réponse, je remplace le texte
                                        idTextLed2.textContent = requete_LEDB.responseText // je remplace le texte par la réponse recue dans la requete
                                        
                                        if (requete_LEDB.responseText.includes("éteinte")) {
                                        imageLedBon.style.display ='none';
                                                imageLedBoff.style.display ='inline';
                                        } else if (requete_LEDB.responseText.includes("allumée")) {
                                                imageLedBon.style.display ='inline';
                                                imageLedBoff.style.display ='none';
                                        }
                                        setTimeout( MAJLedB, 500 )
                                });
                                
                        }                                                               
                        MAJLedB()  // je repete l'opération toute les 0.5 secondes
                
                </script>
 
    </body>
</html>

LE .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
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
.bouton_on  {
    display: inline-block;
    background-color: rgb(0, 155, 0);
    border-radius: 10px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 28px;
    padding: 10px;
    width: 125px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}
 
.bouton_on:hover {
    background-color: rgb(2, 90, 2);
    color:black;
}
 
.bouton_off  {
    display: inline-block;
    background-color:red;
    border-radius: 10px;
    border: 4px double #cccccc;
    color: #eeeeee;
    text-align: center;
    font-size: 28px;
    padding: 10px;
    width: 125px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
}
 
.bouton_off:hover {
    background-color:rgb(155, 6, 6);
    color:black;
}
 
.td_txt {
    width:200px;
    text-align:left;
    padding-left:30px;
    height:50px;    
}
 
.td_BP {
    width:300px;
    text-align:center;
    column-span:2 ;
}
 
.ta_BP{
    text-align:center;
    border:2pt solid red;
}

PS : ne me donnez pas de code, juste la bonne méthode. J'aimerais essayer seul dans un premier temps et je vous montrerai mes âneries après !