J'aimerais que mes utilisateurs puissent changer la couleur de leur arrière-plan et la couleur de la police à l'aide des boutons "d'accessibilité". Le site devrait s'en souvenir lorsque l'utilisateur navigue.

Un exemple peut être vu ici:

https://www.shop4support.com/

Cliquez sur les lettres colorées à gauche du bouton "Signaler cette page" tout en haut.

1
Jason 29 nov. 2011 à 16:40

6 réponses

Meilleure réponse

Je sais que c'est vieux - mais c'est toujours applicable - et un bon point de départ

http://dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

-1
Manse 29 nov. 2011 à 15:47

Je suggère de gérer cela à l'aide de cookies PHP, voici un exemple de la façon dont vous pouvez le faire:

http://pastebin.com/UeNfra7w

J'espère que cela vous a aidé.

2
Twiley 29 nov. 2011 à 13:39

Votre meilleur pari sans gestion de session côté serveur serait d'utiliser des cookies.

En cliquant sur le bouton de changement de style, un cookie est stocké avec cette taille de client de choix. Vous pouvez ensuite lire ce cookie à chaque chargement de page pour recharger les préférences de l'utilisateur.

La façon la plus simple de le faire serait d'utiliser jQuery comme le dit @Kaiser. Il vous permet de modifier assez facilement les données de style lors du chargement de la page et des clics.

0
Benjamin Brizzi 29 nov. 2011 à 12:58

En savoir plus sur Jquery

http://api.jquery.com/css/

0
Kaiser 29 nov. 2011 à 12:45

Vous pouvez utiliser des solutions javascript comme http://www.vijayjoshi.org/2009/04/02/changing-font-size-on-a-page-with-javascript-for-better-user-experience/

Démo: http://www.vijayjoshi.org/examples/changeFont.html

De même, vous pouvez modifier tout autre style CSS.

0
tomexx 29 nov. 2011 à 12:44

Ressemble lorsque vous cliquez sur ces liens, je recharge simplement la page avec le style défini.

Un exemple de base pourrait être comme ça

Définir vos styles

<style>
.theam_red {background:gray;color:white}
.theam_yellow {background:yellow;color:red}
</style>

Script pour changer le className

MISE À JOUR : ajout de noms de fonction de cookie, pour que le cookie fonctionne im en utilisant cookie quirksmode

<script>

// au chargement de la page, obtenez le cookie s'il existe et appliquez le style préféré des utilisateurs, // vous pouvez également bloquer la page / le masquer jusqu'à ce que la page soit prête à appliquer le style, sinon OBTENEZ le cookie et définissez le style avec votre application langage serveur par exemple, PHP / JSP ...

window.onload = function (){
   if(readCookie('theam')){
      var bdy = document.getElementById('container').className = readCookie('theam');
   }
}


function setStyle(whichStyle){
var bdy = document.getElementById('container');
switch (whichStyle){

case 1: bdy.className = "theam_yellow";
createCookie('theam','theam_yellow' ,365); //cookie function cookie, name, days
break;

case 2: bdy.className = "theam_red";
createCookie('theam','theam_red' ,365); // cookie function cookie, name, days
break;
}}}
</script>

Définir un id sur le body tag par exemple et une classe par défaut

<body id="container" class="theam_default">
<input type="button" value="yellow" onclick="setStyle(1)" />
<input type="button" value="Gray" onclick="setStyle(2)" />
</body>
1
david 29 nov. 2011 à 13:15