8791 sujets

Développement web côté serveur, CMS

Choix de couleur du texte par le visiteur avec cookie

Bonjour!

Je voudrais permettre à mes visiteurs de changer la couleur du texte en donnant un choix de plusieurs couleurs dont le choix pourrait être sauvegardé dans un cookie.

La couleur du texte par défaut est représenté dans cette ligne directement dans la page index.php :

#letexto {color:#0faaff;}

J'ai pensé à PHP mais ça ne serait pas dynamique, en javascript ça le serait mais j'ai aucune idée comment le faire avec.

Une aide serait appréciée. Merci.

Précision :
J'ai trouvé ce code qui fait ce que je voudrais mais surement que je pourrais l'adapter à ma ligne #letexto {color:#0faaff;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Couleur</title>
    <meta name="author" content="lgh" />
    <script type="text/javascript">
        //<![CDATA[ 
        function ecrirecouleur() {
            var i, j, k;
            var hexadecimal = new Array('00', '33', '66', '99', 'CC', 'FF');
            i = 0; while (i < 6) {
                couple1 = hexadecimal[i]; if (i > 0) document.write('<br\/>'); i++;
                j = 0; while (j < 6) {
                    couple2 = hexadecimal[j]; j++;
                    k = 0; while (k < 6) {
                        couple3 = hexadecimal[k];
                        codecouleur = couple1 + couple2 + couple3;
                        document.write('<span style="cursor: default; background:#' + codecouleur + '" onmouseover="document.getElementById(\'vision\').style.backgroundColor=\'#' + codecouleur + '\';" onclick="alert(\'#' + codecouleur + '\');">&nbsp;&nbsp;<\/span>');
                        k++;
                    }
                }
            }
        } //Nota: si vous changez le nombre de couples dans le tableau, faites varier les valeurs maximales de i j et k.
        //]]>
    </script>
</head>
<body>
<h1>Palette de couleurs</h1>
<hr />
<p>
</p>
<table>
 <tr>
  <td align="center">
   <span id="span7">Choisissez, cliquez</span> 
   <div id="vision">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
   <div><script type="text/javascript">ecrirecouleur();</script></div>
  </td>
 </tr>
</table>
<hr />
<p>1 document valide... <br />LGH</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" border="0" width="88" /></a>
</p>
</body>
</html>


Ce qui affiche :

upload/29862-palettedec.jpg

Quand on choisi une couleur, ça affiche une alerte qui indique le code html de la couleur.
J'aimerais à la place, que ma partie CSS à l'en-tête prenne le code html de la couleur.
Je placerai le code javascript dans la page index et le CSS aussi qui y est déjà.

ça doit se faire.


[/i]
Modifié par dan4 (22 Aug 2010 - 01:18)
Salut,

paolo a écrit :
C'est à dire ?
Même question ! Smiley langue

PHP (langage serveur) et JavaScript (langage client) sont tous les 2 adaptés. Effectivement avec JS tu évites un réaffichage de la page.

Il se trouve que le tuto qui explique cela parle de PHP. Smiley cligne
PHP ou JS, il te faut jouer avec le cookie. Le tuto que t'a donné Heyoan est très bien pour la partie PHP.
Pour JS, tu peux aussi manipuler le cookie pour se souvenir de la couleur choisie : je n'ai pas de tuto tout fait, mais il y a un bon exemple dans cette doc : https://developer.mozilla.org/en/document.cookie


le plus pratique est encore de recharger ta page, mais si tu veux appliquer immédiatement ton style, il faut l'insérer dans ta page en JS de cette manière


var oStyle = document.createElement('style'),
 sContent = '#letexto {color:#0faaff;}';
oStyle.type = 'text/css';
if (oStyle.styleSheet) { // IE way
	oStyle.styleSheet.cssText = sContent;
} else { // standard way
	oStyle.appendChild(document.createTextNode(sContent));
}
document.getElementsByTagName('head')[0].appendChild(oStyle);


sinon les librairies JS sont tes amies
Sujet clos
Aller à