JeuWeb - Crée ton jeu par navigateur - [Script JS] Changer de style à la volée

Un petit truc que j'ai utilisé sur quelques-uns de mes sites permettant de changer le skin du site sans recharger la page.

Les fichiers CSS se trouvent sans les divers tags link du document HTML.
Avec un peu de JS, il est possible de les changer à la volée.

L'exemple qui suit suppose que les css sont organisés par thème.
Ainsi, on aura

theme/defaut/css/general.css
theme/defaut/css/forum.css
theme/defaut/css/map.css

theme/bleu/css/general.css
theme/bleu/css/forum.css
theme/bleu/css/map.css

theme/rouge/css/general.css
etc

Code PHP :

<script type="text/javascript">
function switchTheme(newStyle){
    //Récupération des 'links'
    var aLinks = document.getElementsByTagName("link");         
    var oldStyle='';
    
    //Parcours du tableau
    for(var i=0;i<aLinks.length;i++){
        //Test pour voir si c'est une feuille de style
        if(aLinks[i].rel.toLowerCase()=='stylesheet'){
            //oldStyle est une chaine contenant le nom du style précédent
            //Elle est utilisée pour les remplacements et n'est initialisée que si elle est vide
            if(oldStyle==''){
                oldStyle=aLinks[i].href.substr(aLinks[i].href.lastIndexOf('/theme/')+7);
                oldStyle=oldStyle.substring(0,oldStyle.lastIndexOf('/css/'));
            }
            aLinks[i].href=aLinks[i].href.replace('/theme/'+oldStyle+'/css/','/theme/'+newStyle+'/css/');
        }
    }

    //Sauvegarde du nouveau thème dans les préférences du visiteur
    //J'utilise de l'Ajax avec des objets fait maison pour y parvenir
    // Mais chacun employer sa propre méthode
    var _xhr= new HTTPObject();
    _xhr.addArg('site_theme',newStyle);
    _xhr.setLoader(false);
    _xhr.sendMode='POST';
    _xhr.get('./include/tools.php5');
}
</script> 

Pour voir le système en action, vous pouvez aller sur cette page.
Vous pouvez changer le style en le sélectionnant dans la boite en bas à gauche (thème actif).

c'est bien intéressant ton truc

le système est il compatible pour tous les navigateurs ?

merci en tout cas

Hum ... ca existe depuis longtemps il me semble

. Mais c'est sympa de partager.

Dans le "style" je sais pas si vous connaissez ce site :
http://www.csszengarden.com/

Le principe est simple : une même page ... et des milliers de style différent.
Attention, ça décoiffe pas mal ! (http://www.csszengarden.com/tr/francais/...ss&page=0)

kéké

Citation :le système est il compatible pour tous les navigateurs ?

Testé avec succès sur Safari, IE7, FF3 et Opera 9

Je suis conscient que dans l'exemple donné, c'est purement gadget. J'ai quelques sites ou je me sers de ce système pour customiser le menu, certaines parties du site, etc. Le gros plus (à mon sens) est le changement sans rechargement.

ouaip, je ne suis pas sur que ce soit purement gadget justement

on peut imaginer :

css pour des versions de langue (quand il y a des images de fond avec du texte)

css pour accessibilité (exemple adapté pour les daltoniens, ...)

css pour les changements de statut du personnage (exemple : abus d'alcool, de drogue ==> css plus "psychadélique", blessure suite à combat ==> css plus "sanguignolent", message urgent reçu via ajax ==> css plus "clignotant" )

donc tant en gameplay qu'en accessibilité au sens large, je trouve ça très bien, et je ne savais pas par où commencer, si jamais, un jour, me prenait l'envie de rendre dynamique le changement de css, donc merci

JeuWeb - Crée ton jeu par navigateur

Roworll

Ter Rowan

keke

Roworll

Ter Rowan