Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1521 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Changer couleur bouton selon variable

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Changer couleur bouton selon variable

n°2264753
holy-calam​ity
Posté le 25-08-2015 à 05:37:35  profilanswer
 

Bonjour à tous ! :)
 
Je viens vers vous car j’ai une question que je n’arrive pas à résoudre malgré mes recherches.
 
Le sujet est tout simple :
J’ai réalisé une page en HTML/CSS avec un peu de javascript. Dans cette page, l’utilisateur est amené à cliquer sur des boutons.
Je stocke le choix d’un utilisateur dans une variable en localStorage afin de pouvoir en garder une trace à tout instant et lors des prochaines connexions à ma page.
Ce que j’aimerai réaliser, c’est qu’au moment où l’utilisateur a cliqué sur un des boutons, celui-ci change de couleur afin de préciser que le choix de l’utilisateur s’est orienté vers ce bouton. Ainsi quand il reviendra sur cette page dans le futur, il verra que c'était ce bouton qui était sélectionné.
 
Sur internet et même sur ce forum j’ai trouvé pas mal de questions similaires, mais quand est venu le moment d’appliquer les différentes solutions, jamais ça ne marchait.
Je vous met donc mon code ci-dessous avec la solution que j’ai tenté de réaliser (et qui ne marche pas donc).
Si quelqu’un a une idée sur comment ça peut marcher je vous en serai reconnaissant.
 
Je vous remercie ;)
 
Script javascript et code HTML:

Code :
  1. function WhatVoiceAmIUsing()
  2. {
  3.       property = document.getElementById(localStorage.voiceName);
  4.       property.style.backgroundColor = '#FF0000';
  5. }
  7. <a id="my-id1" class="buttonlink"><button onclick="SpeakFunction('OM', 'voice-number-1')" class="myButton" style="width:18%;left:10%;top:50%;height:10%;">Button1</button></a>


Notez que le localStorage.voiceName ne reçoit que des valeurs qui ont le meme nom que les id des boutons.
 
Partie CSS:

Code :
  1. .myButton {
  2.       -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  3.       -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  4.       box-shadow:inset 0px 1px 0px 0px #ffffff;
  5.       background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
  6.       background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  7.       background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  8.       background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  9.       background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
  10.       background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  11.       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
  12.       background-color:#f9f9f9;
  13.       -moz-border-radius:6px;
  14.       -webkit-border-radius:6px;
  15.       border-radius:6px;
  16.       border:1px solid #dcdcdc;
  17.       display:inline-block;
  18.       cursor:pointer;
  19.       padding:6px 24px 6px 24px;
  20.       position:fixed;
  21.       vertical-align:middle;
  22.      -webkit-touch-callout: none;
  23.      -webkit-user-select: none;
  24.      -khtml-user-select: none;
  25.      -moz-user-select: none;
  26.      -ms-user-select: none;
  27.       user-select: none;
  28. }
  30. .myButton:hover {
  31.       background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
  32.       background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  33.       background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  34.       background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  35.       background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
  36.       background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  37.       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
  38.       background-color:#e9e9e9;
  39. }
  40. .myButton:active {
  41.       -webkit-touch-callout: none;
  42.       -webkit-user-select: none;
  43.       -khtml-user-select: none;
  44.       -moz-user-select: none;
  45.       -ms-user-select: none;
  46.       user-select: none;
  47. }
  49. .buttonlink{
  50.       text-decoration:none;
  51.       position:fixed;
  52.       font-family:arial;
  53.       -webkit-touch-callout: none;
  54.       -webkit-user-select: none;
  55.       -khtml-user-select: none;
  56.       -moz-user-select: none;
  57.       -ms-user-select: none;
  58.       user-select: none;
  59. }


 
J'espere que le code ci-dessus vous suffit. Comme vous pouvez vous en douter ce n'est pas moi qui est ecrit le CSS...
 
Encore merci :)

mood
Publicité
Posté le 25-08-2015 à 05:37:35  profilanswer
 

n°2264931
holy-calam​ity
Posté le 28-08-2015 à 04:48:23  profilanswer
 

Personne ne peut m'aider?
 
[:moon06]


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Changer couleur bouton selon variable

 

Sujets relatifs
Convertir un string en nom de variable ? (parseJSON)Récupérer variable d'une URL dans un VBS
Couleur selon un pourcentage ?Récupérer variable d'un flux XML
changer le nom table dans ma pagevariable dans une condition bash
changer l'axe des abscisse sous matlabBouton "enregistrer" qui reporte valeur dans autre feuille
Récupérer la couleur de la barre de titre sous windows 8Lire une variable contenu dans un fichier durant une boucle ?
Plus de sujets relatifs à : Changer couleur bouton selon variable

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.055 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR