Discussion :

[luxmen]

Je vous explique mon probleme, J'ai une page avec un switcher de CSS (en JS) pour mes différents themes de couleur,

J'aimerais en outre pouvoir faire de même avec des backgrounds, mais le seul moyen que j'ai trouvé est de changer la classe css pour le background... mais dans ce cas la, ce n'est pas stocké dans un cookie.

Pour mieux comprendre, voici un lien :
http://da4ever5.free.fr/allhtml/#

On voit bien un switcher de style css avec gestion des cookie, mais pour les background, c'est un switch avec un lien... Moi j'aimerais pouvoir enregistrer les deux choix de mes internautes style + fond.

Si quelqu'un a une idée, je serais très heureux !

Merci d'avance

[Bisûnûrs]

J'ai fait ça, si ça peut t'aider :

http://developpez.net/forums/showthread.php?t=380160

[luxmen]

Salut Bisûnûrs,

Je te remercie pour ton code, mais je 'avais deja vu (j'ai fait une petite recherche)...

Mais en fait, j'ai deja un style switcher en JS qui marche très bien...Le probleme n'est pas la, ce que je cherche à faire, c'est de permettre à mes visiteurs de choisir un style particulier parmis plusieurs, mais aussi un background parmis pusieurs et ce independamment des styles.

Le tout géré avec des cookie.

Pour le moment, j'ai bien un styleSwitcher qui change mes style, avec enregistrement dans un cookie, mais je voudrais faire pareil pour les backgrounds...

comme dans le lien suivant : http://da4ever5.free.fr/allhtml/#
mais en enregistrant aussi les background

[Bisûnûrs]

Dans ce cas-là, tu créés un autre appel à ta fonction createCookie sur le onunload et tu lui mets un nouveau nom que tu récupères ensuite.

[luxmen]

Salut Bisûnûrs,

Le problème c'est que je suis un vrai debutant en javascript, et je ne sais pas trop comment m'y prendre pour faire ce que tu me dis...

Car le problème c'est que je change de classe pour les fonds et non de stylesheet comme pour les styles... car sinon il y a conflit entre les les différents css et je perds mon background a chaque changement.

Tu pourrais pas me guider pas a pas ?

Mon JS ressemble a ça :

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

et le changement de background est fait comme cela dans mon HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<UL>
  <LI><A onClick="setActiveStyleSheet('1'); return false;"   href="#">Activer la skin "classique"</A> 
  <LI><A onClick="setActiveStyleSheet('2'); return false;"   href="#">Activer la skin "Alternative 1"</A> 
  <LI><A onClick="setActiveStyleSheet('3'); return false;"   href="#">Activer la skin "Alternative 2"</A> 
  </LI></UL>
<UL>
  <LI><A onClick="setClass(fond,'fond')" href="#">Activer le fond rose</A> 
  <LI><A onClick="setClass(fond,'fond2');" href="#">Activer le fond jaune</A> 
  <LI><A onClick="setClass(fond,'fond3');" href="#">Activer le fond bleu</A> 
</LI></UL>

En tout cas, merci beaucoup pour ton aide