Changer de theme et de couleur

Télécharger le projet
Commenter

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 }
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (larion)