Plusieurs designs sur la même page

Publié le 31 janvier 2006 par Francisek

Niveaux:

Pour faire suite à un article jeté à la poubelle, je vous propose aujourd'hui un autre commutateur de feuilles de styles, plus robuste et performant que l'ancien (très vieux) que je proposais dans les débuts de ce blog. Ce script vous permettra d'appliquer à votre page web un design en remplacement des styles CSS externes existants.

Installation

Avant de procéder à l'installation, assurez-vous que :

vous pouvez insérer du javascript dans votre page (pour les over-blog, le niveau Privilège est requis).
vous avez préparé vos feuilles de styles et les avez envoyées sur un espace web direct (pas de putfile).

Tout est bon ? alors alors allons-y ...

Téléchargez mon script (change-cssv2.zip)
Décompressez le zip et éditez le fichier change-css.js qui s'y trouve (faites-le glisser sur votre éditeur de texte favori):

Si tous vos CSS sont dans le même dossier, vous pouvez définir l'url de celui-ci dans la ligne :

this.css_url = "http://www.monsite.com/dossiers_css/";

(n'oubliez pas le / à la fin du dossier),

sinon vous devrez spécifier l'url de chaque CSS dans le point suivant.
Pour chacun de vos CSS, ajoutez à la variable autant de lignes comme celle qui suit, séparée par des virgules :
new C_FSK_Style("fichier.css", "Titre du design", "type de feuille ", "media concerné ")
Par exemple :

new C_FSK_Style("fichier1.css", "Titre du design 1", "alternate stylesheet", "all"),
new C_FSK_Style("fichier2.css", "Titre du design 2", "alternate stylesheet", "all")

Si vos CSS ne sont pas dans le même dossier, vous devrez en spécifier l'url dans le nom du fichier.

[Edit 07/03/2006]
Un paramètre supplémentaire du script permet par défaut de mémoriser le style choisi par votre visiteur dans un cookie (cela permet d'appliquer ce style à chacune de ses visites.
Vous pouvez désactiver cette option en modifiant la ligne:

this.memoPrefs = true;
en
this.memoPrefs = false;

[/Edit]
Sauvegardez vos modifications et envoyez votre fichier change-css.js sur le serveur de votre hébergeur.
Insérez dans votre page (dans l'entête de préférence), en mode source, la ligne :

<script type="text/javascript" </script>

Utilisation

Pour changer de feuille de style, vous devez appeler une fonction javascript dans votre page.

Vous disposez de deux méthodes de changement de feuilles de style :

Par le numéro de feuille (0 pour la première, 1 pour la deuxième ...)
La fonction à appeler est MesCSS.AfficheCSSNum(numéro de feuille);
Par le titre du design
La fonction est alors MesCSS.AfficheCSSNom("nom du style");
Attention, le nom du style doit être strictement identique à celui défini plus haut.

Par exemple, vous pouvez placer dans votre page un lien qui affichera la première feuille de style :

<a href="#" onclick="javascript:MesCSS.AfficheCSSNum(0);">Premier design</a>

Lorsque le visiteur clique sur ce lien, la feuille de style est chargée et appliquée. Toutes les autres feuilles de style sont désactivées.

Vous pouvez aussi placer un bouton qui affichera le design nommé Titre du design 2 :

Vous pourrez proposer à vos visiteurs des styles multiples, des pages d'accueil personnalisées, etc ... Les applications de designs ne sont limitées que par votre imagination !

Par exemple, vous pouvez appliquer le style nommé "Accueil" pour votre page d'accueil et un style nommé "Articles" pour les pages d'articles en plaçant ces lignes à la fin du script:

if(document.URL.indexOf(".html") == -1) MesCSS.AfficheCSSNom("Accueil");
if(document.URL.indexOf("article") > -1) MesCSS.AfficheCSSNom("Article");

Mais vous pourrez aussi simplement proposer plusieurs designs à vos visiteurs (leur choix ne sera pas mémorisé).