Le 09/07/08, Mickael Bertainchant a écrit :
Desolé pour cette reponse tardive; j'ai reussi a coder ce changement de
style par le javascript. Si jamais ma solution t'interesse, envois moi un
message et je te la donnerais.
En gros j'ai aussi utiliser 2 fonctions javascript classiques pour
l'ecriture et la lecture des cookies. Je defini un style par defaut que
j'applique si le cookie "cssStyle" n'existe pas, lorsque je clique sur mon
liens pour changer de style, je mets a jour le cookie cssStyle avec sa
nouvelle valeur (variable currentCssStyle) et je recharge ma page (c'est pas
necessaire mais j'en ai besoin pour faire varier le texte de mon lien -->
avant changement "Texte Brute" apres changement "Style Graphique")
La ou j'ai eu du mal c'est qu'il faut faire varier dans l'entete le nom de
la CSS selectionnée par le visiteur.
Il faut les déclarer comme ceci :
<link rel="stylesheet" type="text/css" href="squelettes/style.css"
title="standard" />
<link rel="alternate stylesheet" href="squelettes/style_vert.css"
type="text/css" title="vert" />
<link rel="alternate stylesheet" href="squelettes/style_plus.css"
type="text/css" title="plus_blanc" />
<link rel="alternate stylesheet"
href="squelettes/style_plus_vert.css" type="text/css"
title="plus_vert" />
<script type="text/javascript" src="squelettes/styleswitcher.js"></script>
Tu peux en mettre autant que tu veux.
Tu les actives par :
<div class="switcher"> <!-- menu d'activation des skins -->
<a href="#" onclick="setActiveStyleSheet('standard'); return
false;"><img src="squelettes/img/boule_blanche12.gif" alt="Fond blanc"
/></a> <!-- activation du prog JavaScript pour rappeler la skin
par défaut -->
<a href="#" onclick="setActiveStyleSheet('vert'); return
false;"><img src="squelettes/img/boule_verte12.gif" alt="Fond vert"
/></a> <!-- activation du prog JavaScript pour appeler la skin 2 -->
<a href="#" onclick="setActiveStyleSheet('plus_blanc'); return
false;"><img src="squelettes/img/boule_blanchePlus.gif" alt="Fond
blanc gros caractères" /></a> <!-- activation du prog JavaScript pour
appeler la skin 3 -->
<a href="#" onclick="setActiveStyleSheet('plus_vert'); return
false;"><img src="squelettes/img/boule_vertePlus.gif" alt="Fond vert
gros caractères" /></a> <!-- activation du prog JavaScript pour
appeler la skin 4 -->
et le contenu de styleswitcher.js :
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);
Mon code ne gere que 2 etats (Style par defaut ou style pour
l'accessibilité), il faudrait que j'approfondisse pour pouvoir appliquer ceci
a N style, ce qui me permettrait de proposer aux visiteurs le style qui leur
convient (un peu comme l'interface redacteur de SPIP)
--
@plus
Jacques
Pour les lyonnais++ spip-lyon@rezo.net http://spip-party.net/-Lyon-