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