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 }
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.