Changer de theme et de couleur

Soyez le premier à donner votre avis sur cette source.

Vue 12 167 fois - Téléchargée 748 fois

Description

Un exemple très simple: changer à la volé le style de votre site via une liste déroulante.
Voir un exemple sur ActuFr.com.
Compatible IE & FireFox.

Source / Exemple :


//-------- Créer le fichier : couleur.html --------//
<html>
<head>
 <!-- Couleurs des 3 options du menu déroulant  -->
<style>
.style1 { color:white; background-color:blue  }
.style2 { color:white; background-color:red   }
.style3 { color:white; background-color:green }
</style>
<script> // Chargement du style.css
StyleCss=(location.hash=="") ? 1 : eval(location.hash.substring(1,2));
document.write('<style>@import url(style'+StyleCss+'.css);</style>')
</script>
</head>
<body>
<form style="margin:1;" name="Fcolor"> 
<select id=ListMenu  onchange="javascript:location.href=this.value;location.reload()">
  <option class=style1 value="couleur.html#1">Thème Bleu 
  <option class=style2 value="couleur.html#2">Thème rouge
  <option class=style3 value="couleur.html#3">Thème Vert  
</select>
</form>
<script>  // On applique la couleur de <option> à <select>
document.Fcolor.ListMenu.options[StyleCss-1].selected=true;
document.Fcolor.ListMenu.className=document.Fcolor.ListMenu.options[StyleCss-1].className;
</script>
<H1> TITRE </H1>
<H2> TITRE </H2>
<H3> TITRE </H3>
<H4> TITRE </H4>
<a href="http://actufr.com">Voir un exemple sur ActuFr.com</a>
</body>
</html>

//-------- Créer le fichier : style1.css --------//
H1 { color:#0000FF }
H2 { color:#5555FF }
H3 { color:#7777FF }
H4 { color:#9999FF }
a:link   { color:#0000FF; text-decoration:none }
a:visited{ color:#5555FF; text-decoration:none }
a:hover  { color:#9999FF; text-decoration:none }

//-------- Créer le fichier : style2.css --------//
H1 { color:#FF0000 }
H2 { color:#FF5555 }
H3 { color:#FF7777 }
H4 { color:#FF9999 }
a:link   { color:#FF0000; text-decoration:none }
a:visited{ color:#FF5555; text-decoration:none }
a:hover  { color:#FF9999; text-decoration:none }

//-------- Créer le fichier : style3.css --------//
H1 { color:#007700 }
H2 { color:#009900 }
H3 { color:#00CC00 }
H4 { color:#00FF00 }
a:link   { color:#007700; text-decoration:none }
a:visited{ color:#009900; text-decoration:none }
a:hover  { color:#00FF00; text-decoration:none }

Codes Sources

A voir également

Ajouter un commentaire Commentaires
nicolazik Messages postés 2 Date d'inscription mardi 26 décembre 2006 Statut Membre Dernière intervention 22 février 2012
2 juil. 2011 à 14:12
Bonjour,

est-ce qu'avec un tel code, le thème est conservé lors d'un changement de page ou non ?
J'aurais voulu appliquer ce code à un site entier, mais si il faut re-choisir un thème à chaque changement de page, c'est pas intéressant ^^
georges023 Messages postés 24 Date d'inscription vendredi 23 décembre 2005 Statut Membre Dernière intervention 7 septembre 2006
5 sept. 2006 à 01:37
Super, bien fais, j'ai justement programmer un code pareil (specialement creer pour mes besoins),
Il utilise plus de tme que celui-ci et est plus complexe et il est au aussi copyright©, lol

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.