CHANGER DE THEME ET DE COULEUR , Source N°31254

Information sur la source

Catégorie :Formulaire Niveau : Initié Date de création : 07/05/2005 Vu / téléchargé: 5 419 / 452

Auteur : larion

Site perso

Ecrire un message privé

Note :

2,00 / 10

1
2
3
4
5
6
7
8
9
10

Commentaire sur cette source (1)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

//-------- Créer le fichier : couleur.html --------//
<html>
<head>
<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 }

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

couleur.html 1 145 octets
style1.css 236 octets
style2.css 236 octets
style3.css 238 octets

Télécharger le zip

Sources du même auteur

Toutes les sources de larion

Sources de la même categorie

Toutes les sources de la catégorie Formulaire

Commentaires

Commentaire de georges023 le 05/09/2006 01:37:03

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