Changer plusieurs fois la couleur d'un texte en cliquant sur des boutons

**CASEVIDE** · 03/11/2017, 15h08

Bonjour,

Pour commencer j'arrive à m'en sortir en html et css mais je ne suis pas du tout un as en script, et je pense que j'ai besoin de passer par un script pour réaliser le projet que j'ai en tête.

Alors, j'ai le but de modifier un texte via deux boutons. A la base le texte est en gris 50%, plus on clique sur le premier bouton plus le texte tend vers le blanc et à l'opposé plus on clique sur le second bouton plus le texte tend vers le noir.
Ainsi, au fur et à mesure des clics, on peut constater l'évolution de la couleur du texte, en sachant que j'aimerai que ça "perdure sur le temps", que ça ne revienne pas à un gris 50% à chaque actualisation de la page.

Étant pas du tout familier au script j'avoue ne pas savoir vers où commencer ! Si ça ne vous parait pas clair pour le traduire en script, n'hésitez pas à m'en demander plus !

Merci d'avance si vous prenez le temps de me répondre.

Cordialement,
CaseVide

**mathieu** · 03/11/2017, 19h08

En ce qui concerne les boutons qui modifient une couleur, c'est faisable en JavaScript. À chaque action sur le bouton, le code JavaScript modifiera le code CSS qui définit la couleur.

Par contre pour garder en "mémoire" le choix de la couleur, il faudra utiliser un langage côté serveur comme PHP. Il faudra définir si la couleur est affiché seulement à l'utilisateur courant ? Et si cet utilisateur c'est identifié ? Ou alors la couleur modifiée est montrée à tous les visiteurs du site ?

**Archimède** · 03/11/2017, 21h25

Pour la partie javascript, un bout de code :

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
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Page Title</title>
</head>
 
<body>
<script>
    var TabBut=[],TabFunctionClic=[];
    var x=0.5;
    var montexte="Chaîne de caractères et canal alpha.";
    var divtext=document.createElement('div');
     divtext.style.width=700+"px";
     divtext.style.height=40+"px";
     divtext.style.position="absolute";
     divtext.style.left=200+"px";
     divtext.style.top=10+"px";
     divtext.style.font= "bold 40px arial";
     divtext.style.color= 'rgba(0,0,0,'+x+')';
     divtext. textContent =montexte;
     document.body.appendChild(divtext);
     
     TabFunctionClic[0]=function(){
      if (x>0.00) x-=0.10;
      divtext.style.color= 'rgba(0,0,0,'+x+')'; 
      divtext.textContent =montexte;
    };
    
    TabFunctionClic[1]=function(){
      if (x<1) x+=0.10;
      divtext.style.color= 'rgba(0,0,0,'+x+')'; 
      divtext.textContent =montexte;
    };
    
 
    for(var i=0;i<=1;i++){
        TabBut[i]=document.createElement('input');
        TabBut[i].type='button';
        TabBut[i].style.width=160+"px";
        TabBut[i].style.height=40+"px";
        TabBut[i].style.position="absolute";
        TabBut[i].style.left=10+"px";
        
       if (i===0){
        TabBut[i].style.top=10+"px";
        TabBut[i].value="éclaicir";
        }
        else {
            TabBut[i].style.top=50+"px";
            TabBut[i].value="foncer";
        }
        document.body.appendChild(TabBut[i]);
        TabBut[i].addEventListener('click',TabFunctionClic[i]);
    }
</script>
</body>
</html>

Après pour l'actualisation de la page, c'est côté serveur en effet...

Invité · 03/11/2017, 22h25

Bonjour,

Si ça ne concerne que cet utilisateur, pas (nécessairement) besoin de PHP : on enregistre via JS dans un cookie.

**CASEVIDE** · 04/11/2017, 00h11

mathieu, pour le coup l'idée est de le poser sur un site et ensuite d'effectivement le garder en mémoire afin de le montrer à tous les visiteurs du site et que chacun puisse cliquer pour modifier la couleur, pour qu'à terme on puisse voir une modification générale, mais du coup ça m'intéresse aussi de savoir comment le faire.

Archimède, le script est nickel, mais effectivement j'avais oublié de mentionner un détail important, le background du body est aussi en gris 50%, ce qui fait que le texte est de la même couleur que le fond au début, et qu'il s'assombrit/s'éclaircit au fur et à mesure que l'on clique. Je vois (et je ne pense pas me tromper, mais je ne suis pas sûr, hein !) que tu as fait la modification par rapport à la transparence du texte. du coup j'ai une question, est ce que c'est possible de transformer sa couleur et non sa transparence, pour amener vers les différents tons de gris, comme tu l'as fait avec la transparence ?

jreaux62, merci pour l'idée, je pense qu'au début, ce sera que "l'utilisateur" pour voir si ça fonctionne et à terme, c'est d'effectivement le mettre en réseau pour que tout le monde puisse le voir et le faire évoluer.

Et enfin, désolé, je suis vraiment une bille en script !!

**CASEVIDE** · 04/11/2017, 00h29

c'est bon Archimède, j'ai trouvé !

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
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>body{background-color : rgb(127,127,127);}</style>
    <title>Page Title</title>
</head>
 
<body>
<script>
    var TabBut=[],TabFunctionClic=[];
    var x=127;
    var montexte="Chaîne de caractères et canal alpha.";
    var divtext=document.createElement('div');
     divtext.style.width=700+"px";
     divtext.style.height=40+"px";
     divtext.style.position="absolute";
     divtext.style.left=200+"px";
     divtext.style.top=10+"px";
     divtext.style.font= "bold 40px arial";
     divtext.style.color= 'rgb('+x+','+x+','+x+')';
     divtext. textContent =montexte;
     document.body.appendChild(divtext);
     
     TabFunctionClic[0]=function(){
      if (x>0) x-=5;
      divtext.style.color= 'rgb('+x+','+x+','+x+')'; 
      divtext.textContent =montexte;
    };
    
    TabFunctionClic[1]=function(){
      if (x<255) x+=5;
      divtext.style.color= 'rgb('+x+','+x+','+x+')'; 
      divtext.textContent =montexte;
    };
    
 
    for(var i=0;i<=1;i++){
        TabBut[i]=document.createElement('input');
        TabBut[i].type='button';
        TabBut[i].style.width=160+"px";
        TabBut[i].style.height=40+"px";
        TabBut[i].style.position="absolute";
        TabBut[i].style.left=10+"px";
        
       if (i===0){
        TabBut[i].style.top=10+"px";
        TabBut[i].value="foncer";
        }
        else {
            TabBut[i].style.top=50+"px";
            TabBut[i].value="éclaicir";
        }
        document.body.appendChild(TabBut[i]);
        TabBut[i].addEventListener('click',TabFunctionClic[i]);
    }
</script>
</body>
</html>

Changer plusieurs fois la couleur d'un texte en cliquant sur des boutons

JavaScript

Vue hybride

Discussions similaires

Partager

Partager