Changer de theme et de couleur

Soyez le premier à donner votre avis sur cette source.

Vue 10 126 fois - Téléchargée 662 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

Messages postés
2
Date d'inscription
mardi 26 décembre 2006
Statut
Membre
Dernière intervention
22 février 2012

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 ^^
Messages postés
24
Date d'inscription
vendredi 23 décembre 2005
Statut
Membre
Dernière intervention
7 septembre 2006

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.