IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Quelle méthode pour changer la couleur d'un bouton


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut Quelle méthode pour changer la couleur d'un bouton
    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 !

  2. #2
    Responsable LaTeX

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    mai 2013
    Messages
    2 129
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2013
    Messages : 2 129
    Points : 11 190
    Points
    11 190
    Billets dans le blog
    5
    Par défaut
    Tu peux dans un addeventlistener, utiliser des evenements tels que mouseup, mousedown click, ainsi tu pourras ajouter ou supprimer un classe à ton élément

  3. #3
    Membre régulier Avatar de tag9724
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2021
    Messages
    64
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Dordogne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2021
    Messages : 64
    Points : 113
    Points
    113
    Par défaut
    Citation Envoyé par dje8269 Voir le message
    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é.
    Si tu souhaite faire en sorte qu'on bouton soit "ON" tant que le click est maintenus puis à "OFF" quand le click est relâché il faudra utiliser des évènements onmousedown et onmouseup, je t'ais mis un exemple ici https://jsfiddle.net/crbysvhn/

    Ce que je pense en revanche que tu veux accomplir est de faire en sorte qu'un bouton se comporte comme une case à cocher, quand la case est cochée le bouton est "ON" quand elle est décochée le bouton est "OFF".

    En soit c'est possible à faire mais pas directement avec un bouton, il faudra utiliser des checkbox avec un peux de CSS pour leurs donner une apparence de bouton, le plus simple pour commencer sera évidement de n'afficher que des cases à cocher à la place des boutons, ceci étant dit tu trouveras un exemple la encore https://jsfiddle.net/qz6u8Lvg/


    A noter aussi que si tu utilise des checkbox il sera préférable d'utiliser comme évènement onchange à la place de onclick pour vérifier quand l'utilisateur a cliquer sur le "bouton", tu pourras facilement vérifier si une checkbox est cochée ou non avec checkboxElement.checked qui reverras un booléen.
    En complément de l'exemple précédent donc : https://jsfiddle.net/cb10atwk/

  4. #4
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Bonjour à tous,

    Bon j'ai mis un peu de temps a répondre , car j'ai bossé un peu seul dans mon coin grâce a vos conseils.

    La bonne nouvelle c'est que j'ai quelques chose qui fonctionne !! Pour l'électronicien que je suis , j'arrive donc a faire un Bouton style "a bascule", un bouton poussoir momentané classique, un bouton a impulsion , et un bouton poussoir a verrouillage
    J'arrive à afficher quelques images et à les modifier.
    Pour infos sur ma platine a la maison, quand j’appuie sur les boutons de l'écran ça allume les leds branchées sur ma platine. quand j’appuie sur le bp du buzzer la platine émet un son !

    Bon j'avoue c'est certainement pas fait dans les règles de l'art !. Mais j'ai un truc qui fonctionne et qui donne envie d'en faire plus !

    Je risque d'avoir besoin de quelque chose d'autres, c'est d’afficher des valeurs sur mon écran lu par mon ESP32.
    Donc j'ai branché un potentiomètre à mon ESP32. Et je vais maintenant tenter d'afficher les valeurs lues sur mon écran !!!! Ainsi je pourrais connaitre par exemple la température de la maison et pourquoi pas envoyer un mail !

    Allez j'y retourne !

    Un grand merci à vous , j'avance vite grâce à vous

    Mon code est toujours ouvert aux remarques de construction.
    je vous mets le CSS avec .

    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
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    <!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>
    				<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" style="display:none;" 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" id="Bouton1on" onclick="BoutonLED1on()">ON </button>
    								<button class="bouton_off" id="Bouton1off" onclick="BoutonLED1off()">OFF</button>
    							</td>
    						</tr>	
    					</table>
    				</td>
    				<td width=50px;> </td>
    				<td>
    					<table class="ta_BP" >
    						<tr>
    							<td class="td_txt">La LED BLEUE est <span id="id-etat-ledb">-</span></td>
    							<td style="text-align:left;" ><img id="imageLedBon" style="display:none;" src="images/led_b_on.png"><img id="imageLedBoff" src="images/led_b_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>
    			<!-- ####### 2ieme LIGNE  ###############-->
    			<tr>
    				<td>
    					<table class="ta_BP" style="height:125px">
    						<tr>
    							<td><button class="BP_poussoir" id="BP1">PRESS</button></td>
    							<td style="text-align:left;" ><img id="imageBP1on" style="display:none;" src="images/led_r_on.png"><img id="imageBP1off" src="images/led_r_off.png"></td>
    						</tr>	
    					</table>
    				</td>
    				<td width=50px;> </td>
    				<td>
    					<table class="ta_BP" style="height:125px" >
    						<tr>
    							<td>
    								<div class="checkbox-button">
    									<input type="checkbox" id="id_checkbox">
    									<label for="id_checkbox"></label>
    								</div>
    							</td>
    							<td style="text-align:left;" ><img id="imageBuzzon" style="display:none;" src="images/buzzer_on.png"><img id="imageBuzzoff" src="images/buzzer_off.png"></td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    		</table>
     
    		<!-- ######################################################    JAVA SCRIPT    #############################################################-->
    		<script type="text/javascript">
                            //***************************************************************************** */
                            // Traitements sur des cases à chocher
                            const checkbox = document.getElementById('id_checkbox')
     
                            checkbox.addEventListener('change', (event) => {
                            if (event.currentTarget.checked) {
                                    var xhttp = new XMLHttpRequest();
                                    xhttp.open("GET", 'consignes.php?C_BP2=1', true);
                                    xhttp.send();
                                    imageBuzzon.style.display ='inline';
                                    imageBuzzoff.style.display ='none';
                            } else {
                                    var xhttp = new XMLHttpRequest();
                                    xhttp.open("GET", 'consignes.php?C_BP2=0', true);
                                    xhttp.send();
                                    imageBuzzon.style.display ='none';
                                    imageBuzzoff.style.display ='inline';
                            }
                            })                              
                            
                            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();
                                    Bouton1on.style.background ='rgb(2, 90, 2)';
                                    Bouton1off.style.background ='red';
                }
                            function BoutonLED1off() {
                    var xhttp = new XMLHttpRequest();
                    xhttp.open("GET", 'consignes.php?E_LED1=0', true);
                    xhttp.send();
                                    Bouton1on.style.background ='rgb(0, 155, 0)';
                                    Bouton1off.style.background ='rgb(155, 6, 6)';
                }
                            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
                            
                            
                            //***************************************************************************** */
                            // --------------- BP1 furtif
                            const button1 = document.getElementById("BP1");
                            
                            button1.onmousedown = () => {
                                    var xhttp = new XMLHttpRequest();
                                    xhttp.open("GET", 'consignes.php?C_BP1=1', true);
                                    xhttp.send();
                                    imageBP1on.style.display ='inline';
                                    imageBP1off.style.display ='none';
                                    BP1.style.background = "red"
                                    BP1.textContent = "Allumée !"
                            }
     
                            button1.onmouseup = () => {
                                    var xhttp = new XMLHttpRequest();
                                    xhttp.open("GET", 'consignes.php?C_BP1=0', true);
                                    xhttp.send();
                                    imageBP1on.style.display ='none';
                                    imageBP1off.style.display ='inline';
                                    BP1.style.background = "none"
                                    BP1.textContent = "PRESS"                               
                            }                       
                            /***************************************************************************** */
     
                    </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
    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
    .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;
        width:300px; 
    }
    .BP_poussoir{
        font-size: 28px;
        width:200px;
        height:80px;
    }
    .BP_poussoir:hover{
        background-color:#888;
    }
     
     
    /* #######################     bouton checkbox   ###########################################*/
    .checkbox-button label {
        width: 150px;
        padding: 22px;
        background: #eee;
        border: 2px solid #888;
        display: block;
        text-align: center;
        cursor: pointer;
        font-family: Arial;
        font-size: 28px;
        margin-left:20px;
      }
     
      /* Masque la checkbox */
     
      .checkbox-button input {
        display: none;
      }
     
      /* Change la couleur de <label> quand la checkbox est cochée */
     
      .checkbox-button input:checked~label {
        background: darkseagreen;
      }
     
      /* Controle le texte qui apparais dans le bouton */
     
      .checkbox-button label:before {
        content: "MUET";
     
      }
     
      .checkbox-button input:checked~label:before {
        content: "BIP !!!";
      }

    Une petite photo du montage à l'état d'embryon
    Nom : IMG_20210628_182155.jpg
Affichages : 70
Taille : 1,69 Mo

  5. #5
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 494
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 494
    Points : 13 161
    Points
    13 161
    Par défaut
    une petite remarque pour le bouton qui lance un son, je vous conseille de mettre une petite sécurité dans le cas où il y a un souci de connexion internet au moment de l'envoi de la commande d'arrêt.
    vous pouvez par exemple arrêter le son au bout d'un temps donné, ça vous évitera de devoir arracher le haut parleur de la plaque le jour où le son ne s'arrête plus !

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 625
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 625
    Points : 39 649
    Points
    39 649
    Par défaut
    Bonjour,
    Citation Envoyé par dje8269
    il sera préférable d'utiliser comme évènement onchange à la place de onclick
    L'un comme l'autre fonctionnera, il suffit dans les deux cas des tester l'état de checked.


    Citation Envoyé par dje8269
    - A/ Dois-je créer deux images boutons "on" et "off"
    Non, le CSS est suffisamment robuste pour que tu puisses te passer de ces images actuellement.


    Citation Envoyé par dje8269
    B/ Dois-je créer une classe pour le bouton "on" clair et une autre pour le "on"
    C'est une bonne façon de faire effectivement.

    Une remarque au sujet de ton CSS, il est inutile, à de rare exception de maintenir les « prefix-vendeur » qui alourdissent le code
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .classe {
    /*  -webkit-transition: all 0.5s;   /*- out -*/
    /*  -moz-transition: all 0.5s;      /*- out -*/
    /*  -o-transition: all 0.5s;        /*- out -*/
      transition: all 0.5s;
    }
    Au passage le CSS peut-être un grand allié du JavaScript pour tout ce qui concerne le rendu d'affichage des éléments, soit via les add/remove des classes CSS, soit en utilisant les pseudos-classes comme :focus, :active ...


    Remarque concernant la gestion des événements.

    Concernant l'utilisation des mousedown/mouseup il est un schéma qui va faire foirer ton code.

    Je m'explique :
    • Soit un bouton sur lequel je « down la souris », cela entraine bien un événement mousedown sur ce bouton.
    • Si je « up le souris » sur celui-ci, cela entraine bien un événement mouseup sur ce bouton.
    • Maintenant si une fois le « down la souris » je déplace la souris hors du bouton et que je fais un « up la souris » cela ne déclenchera pas d'événement mouseup sur ce bouton et l'action liée à cet événement ne sera pas lancé.

    Dernier point, mais cela sera pour plus tard, il te faudra prendre en compte que les événement mousdown/mouseup ne sont pas pris en compte sur les supports tactiles.

  7. #7
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    @Mathieu: Merci Mathieu. C'est sympa de me l'avoir signalé !


    @NoSmoking :

    Les deux problèmes sont effectivement problématiques. J'avais relevé la partie tactile qui ne fonctionnais pas, avec ma tablette et mon tel .
    par contre j'avais vu le mouse down .Bien vu !

    Comment puis-je contourner ces problèmes ?

    Pour la partie tactile je ne vois pas comment faire !
    Pour la souris relâché en dehors du bouton peut être avec une perte de focus sur le bouton ?

    Sinon je pense ouvrir un nouveau post car je m'arrache les cheveux pour afficher une valeur numérique passée en requête et donc en texte !!!!
    Je m’énerve encore un peu je reviens! je suis dans la partie ou je commence à tout mélanger a force de bosser dessus. La pause s'impose !

  8. #8
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Pour la partie tactile j'ai utilisé "ontouchstart" et "ontouchend" en plus de l'event sur onmousedown et onmouseup.

    Cela fait le script dans le HTML :

    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
    <script>
    //***************************************************************************** */
                            // --------------- BP1 furtif
                            const button1 = document.getElementById("BP1");
                            
                            button1.onmousedown = () => {
                                    var xhttp = new XMLHttpRequest();
                                    xhttp.open("GET", 'consignes.php?C_BP1=1', true);
                                    xhttp.send();
                                    imageBP1on.style.display ='inline';
                                    imageBP1off.style.display ='none';
                                    BP1.style.background = "red"
                                    BP1.textContent = "Allumée !"
                            }
     
                            button1.onmouseup = () => {
                                    var xhttp = new XMLHttpRequest();
                                    xhttp.open("GET", 'consignes.php?C_BP1=0', true);
                                    xhttp.send();
                                    imageBP1on.style.display ='none';
                                    imageBP1off.style.display ='inline';
                                    BP1.style.background = "none"
                                    BP1.textContent = "PRESS"                               
                            }                       
                            /***************************************************************************** */
                            
                            function BP1press() 
                            {
                                    var xhttp = new XMLHttpRequest();
                                    xhttp.open("GET", 'consignes.php?C_BP1=1', true);
                                    xhttp.send();
                                    imageBP1on.style.display ='inline';
                                    imageBP1off.style.display ='none';
                                    BP1.style.background = "red"
                                    BP1.textContent = "Allumée !"
                            }
     
                            function BP1release() 
                            {
                                    var xhttp = new XMLHttpRequest();
                                    xhttp.open("GET", 'consignes.php?C_BP1=0', true);
                                    xhttp.send();
                                    imageBP1on.style.display ='none';
                                    imageBP1off.style.display ='inline';
                                    BP1.style.background = "none"
                                    BP1.textContent = "PRESS"       
                            }       
     
                    </script>

    Le html :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    					<table class="ta_BP" style="height:125px">
    						<tr>
    							<td><button class="BP_poussoir" id="BP1" ontouchstart="BP1press()" ontouchend="BP1release()">PRESS</button></td>
    							<td style="text-align:left;" ><img id="imageBP1on" style="display:none;" src="images/led_r_on.png"><img id="imageBP1off" src="images/led_r_off.png"></td>
    						</tr>	
    					</table>


    Et le CSS


    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .BP_poussoir{
        font-size: 28px;
        width:200px;
        height:80px;
        user-select: none;
    }

    Cela fonctionne mais il y a un petit hic. C'est que je sélectionne le texte du bouton aussi ! j'ai essayé de rajouté "user-select" : none mais cela n'as aucun effet !

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 625
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 625
    Points : 39 649
    Points
    39 649
    Par défaut
    Citation Envoyé par dje8269
    Pour la partie tactile j'ai utilisé "ontouchstart" et "ontouchend" en plus de l'event sur onmousedown et onmouseup.
    Il existe quand même une méthode plus simple de prendre en compte ces événements, plutôt que de rajouter des événements aux événements, je parle de l'API EventPointer, cela ne devient pas un jeu d'enfant mais presque !

    Nota : si tu commences à mettre des appels de fonction dans le HTML tu finiras par ne plus savoir où tu en es

    Je te mets un petit exemple de la mise en œuvre de cette prise en compte :

  10. #10
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut


    Olalala c'est trop beau ! est ce que je peux récuperer le code ? si oui comment je peux faire ! je le vois dans la console mais c'est pas pratique pour étudier ! franchement bravo !

  11. #11
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    décembre 2004
    Messages
    5 660
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : décembre 2004
    Messages : 5 660
    Points : 14 607
    Points
    14 607
    Par défaut
    Salut
    Citation Envoyé par dje8269 Voir le message

    .... est ce que je peux récupérer le code ? si oui comment je peux faire ! je le vois dans la console mais .... !
    Tu peux faire Ctrl+U dans le navigateur, cela ouvre un nouvel onglet avec le code entier de la page.
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

  12. #12
    Nouveau membre du Club
    Inscrit en
    juillet 2005
    Messages
    85
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 85
    Points : 33
    Points
    33
    Par défaut
    Merci ProgElecT, ca fonctionne parfaitement.

    Avant de me lancer dans la compréhension, je vais essayer de régler mon autre problème.

Discussions similaires

  1. Méthode pour changer la couleur d'un objet dynamiquement
    Par Kalmos2 dans le forum AWT/Swing
    Réponses: 3
    Dernier message: 17/11/2010, 12h15
  2. [HTML] quelle est la meilleure méthode pour changer la langue d'un site?
    Par poupouille dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 18/02/2008, 13h17
  3. Réponses: 3
    Dernier message: 01/06/2006, 10h49
  4. [C#] Quelle méthode pour savoir l'état d'un fichier ?
    Par freesly dans le forum Windows Forms
    Réponses: 15
    Dernier message: 25/04/2006, 15h30
  5. Aide pour changer de couleur sur les primitifs GLUT
    Par romainhoarau2764 dans le forum GLUT
    Réponses: 3
    Dernier message: 19/03/2005, 14h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo