Bonjour tout le monde,

Je travail actuellement sur un projet spécifique ou je proposerai à l'Internaute de modifier l'aspect de la page (couleur des liens, du header) à l'aide d'un ou de plusieurs boutons, pour réaliser cela j'ai fouillé dans mes anciens cours de JS ou j'ai retrouvé un "CSS Switching".

Le résultat n'est pas totalement satisfaisant, en effet, lorsque je clique sur un bouton pour changer les couleurs du site, les modifications ne prennent effets que sur une page... et non pas sur toutes les pages du site.

Voici mon code JS:
Code : 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
 
function changeStyleSheet(title) {
   var links = document.getElementsByTagName("link");
	for(var i = 0; i < links.length; i++) {
		if(links[i].getAttribute("title")) links[i].disabled = true;
		if(links[i].getAttribute("title") == title) {
			links[i].disabled = false;
			var expires = new Date();
			expires.setTime(expires.getTime() + (30*24*60*60*1000));
			document.cookie = "stylesheet="+title+";expires="+expires.toGMTString()+";path=/";
		}
	}
}
 
function getStylesheetFromCookie() {
	var cookie = document.cookie.split(";");
	for(var i = 0; i < cookie.length; i++) {
		var values = cookie[i].split("=");
		if (values[0] == "stylesheet") changeStyleSheet(values[1]);
	}
}
Voici mon code XHTML

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
<div style="text-align: center; border: 1px solid #333333; background-color: #f2f2f2">
<p>Couleurs proposées</p>
<img style="cursor: pointer;" alt="violet" src="/common/img/monsite/violet.jpg" onclick="changeStyleSheet('violet')" />
<img style="cursor: pointer;" alt="vert" src="/common/img/monsite/vert.jpg" onclick="changeStyleSheet('vert')" />	
</div>
Je vous remercie pour votre aide.

Amicalement,

Adel