Un header par page avec un design Jimdo

proposé par Gérard, alias lefildargent

Normalement dans un site Jimdo toutes les pages ont en commun deux choses :

L'entête ou le header, en haut de chaque page
La sidebar, à gauche ou à droite de chaque page selon le modèle retenu

Ce tuto décrit comment on peut adapter l'image d'entête en fonction de la page. Selon le type de design retenu, on peut considérer ce tuto comme facile (pour les designs standard) ou moyen (pour les designs spéciaux ou personnels).

Généralités

Si on jette un coup d'oeil au source d'une page, on trouve toujours :

Une balise body avec son attribut id de la forme page-nnnnnnnnn un identifiant unique (2 pages n'ont jamais le même identifiant)
Si on a choisi une mise en page Jimdo standard alors on trouve
- Une balise img avec
  - son attribut id presque toujours emotion-header-img
  - son attribut src de la forme http://URL de l'image
Si on a choisi un "Design spécial" alors on peut trouver
- Une balise div avec
  - son attribut id à déterminer
  - l'image d'entête proprement dite est associée à la div grâce à la propriété background
Si on a choisi un "Design personnel" on a fait le choix de la façon d'amener l'image d'entête. Ce choix s'apparente probablement à l'une des méthodes ci-dessus.

Principe général

Le principe consiste à modifier par un script la valeur de l'URL de l'image d'entête en fonction de l'identifiant de la page concernée. L'endroit idéal pour positionner ce script est la sidebar car elle est commune à toutes les pages du site et intervient dans le flot après l'image d'entête.

Script pour une mise en page standard

Dans la sidebar on insère dans un élément widget/HTML le script suivant :

                <script type="text/javascript">

                /* <![CDATA[ */

                x=document.getElementById("emotion-header-img");

                if (document.getElementById("page-mmmmmmmmm")) {

                    x.src="url_image_entête_pour_cette_page" ;

                }

                if (document.getElementById("page-nnnnnnnnn")) {

                    x.src="url_image_entête_pour_cette_page" ;

                }

                ... Ajoutez autant de blocs if (...) {...} que nécessaire.

                /* ]]> */

                </script>

Détaillons les quelques instructions de ce script :

x=document.getElementById("emotion-header-img");

On associe à la variable x l'élément HTML identifié par emotion-header-img. Normalement avec une mise en page standard Jimdo, il s'agit de l'image d'entête. Il est conseillé de le vérifier (voir plus bas dans ce tuto) avec votre mise en page, car je n'ai pas passé en revue toutes les mises en pages proposées par Jimdo.

if (document.getElementById("page-mmmmmmmmm"))

En clair et en français, on dit :

"S'il existe dans la page un élément HTML identifié par page-mmmmmmmmm, alors faire ce qui suit entre les accolades."

C'est donc là qu'on va reporter, à la place de page-mmmmmmmmm, l'identifiant (voir plus bas) que l'on trouve dans la balise body de la page pour laquelle on veut modifier l'image d'entête.

x.src="url_image_entête_pour_cette_page" ;

On modifie ici l'URL correspondant à l'attribut src de la balise img de notre image d'entête, mais ici seulement pour la page concernée. Il s'agit ici de l'URL complète (commençant par http://).

Une remarque complémentaire : Toutes les images d'entête doivent avoir les mêmes dimensions.

Script pour un design spécial

Dans la sidebar on insère dans un élément widget/HTML le script suivant :

                <script type="text/javascript">

                /* <![CDATA[ */

                x=document.getElementById("head");

                if (document.getElementById("page-mmmmmmmmm")) {

                    x.style.background="url(url_image_entête_pour_cette_page)     no-repeat top left" ;

                }

                if (document.getElementById("page-nnnnnnnnn")) {

                    x.style.background="url(url_image_entête_pour_cette_page)     no-repeat top left" ;

                }

                ... Ajoutez autant de blocs if (...) {...} que nécessaire.

                /* ]]> */

                </script>

Détaillons les quelques instructions de ce script :

x=document.getElementById("head");

On associe à la variable x l'élément HTML identifié par head. A vous de trouver l'identifiant de la div à laquelle est attachée le fond (background) correspondant à l'image d'entête (voir plus bas dans ce tuto), car je n'ai pas passé en revue tous les designs spéciaux proposés par Jimdo.

if (document.getElementById("page-mmmmmmmmm"))

En clair et en français, on dit :

"S'il existe dans la page un élément HTML identifié par page-mmmmmmmmm, alors faire ce qui suit entre les accolades."

C'est donc là qu'on va reporter, à la place de page-mmmmmmmmm, l'identifiant (voir plus bas) que l'on trouve dans la balise body de la page pour laquelle on veut modifier l'image d'entête.

x.style.background="url(url_image_entête_pour_cette_page) no-repeat top left" ;

On modifie ici la propriété background du style associé à la div qui correspond à l'image d'entête, mais ici seulement pour la page concernée. C'est donc entre les parenthèses qui suivent le mot url que l'on donnera l'URL complète (commençant par http://) de l'image que l'on veut voir pour cette page.

Une remarque complémentaire : Toutes les images d'entête doivent avoir les mêmes dimensions.

Une astuce pour éviter les effets indésirables

L'effet indésirable que l'on peut constater est que avant de voir l'image d'entête voulue, on voit apparaitre puis disparaitre l'image originale (celle qu'on a sélectionnée par "Modifier le header").

Pour éviter cet effet, il est possible de prévoir comme image originale une image complètement transparente.

Variante : Une image au hasard toutes les x secondes

Une variante inspirée par Marc (alias unpieddevantlautre) pour non seulement changer l'image de header en fonction de la page, mais aussi la changer toutes les x secondes à partir d'une liste d'images mais de façon aléatoire et en évitant d'avoir 2 fois de suite la même. Dans le script ci-dessous, n'intervenez que sur les parties en rouge.

                <script type="text/javascript">

                //<![CDATA[

                var images = new Array() ;

                /* Mettez ici, entre crochets et séparés par une virgule, les URLs des images */

                images = ['http://url de la première image', ... ,

                'http://url de la dernière image'];

                /* Mentionnez ici, les dimensions de l'image et la fréquence (en millisecondes) de changement */

                largeur="958";hauteur="162";frequence=4000;

                /* Ne rien changer entre ici ... */

                aleaprev=0;

                x=document.getElementById("emotion-header-img");

                function chg_header() {

                  aleatoire=Math.floor(Math.random()*images.length);

                  aleatoire=(aleatoire+(aleatoire==aleaprev))%images.length;

                  aleaprev=aleatoire;

                  x.src=images[aleatoire]; x.width=largeur;x.height=hauteur;

                  setTimeout("chg_header()",frequence); }

                /* ... et là */

                /* Précisez les conditions concernant les pages pour lesquelles on veut cet effet */

                if (!document.getElementById("page-870471765")) {chg_header();}

                //]]>

                </script>

Variante : La même image pour toutes les sous-pages

Pour répondre à un Jimdonaute qui souhaitait :

une image particulière pour chaque page de niveau 1
la même image pour toutes les sous-pages correspondantes

Ici on associe l'image voulue en fonction de l'URL de la page courante et non plus de l'identifiant de la balise body.

                <script type="text/javascript">

                /* <![CDATA[ */

                x=document.getElementById("emotion-header-img");

                url=location.href ;

                if (url.indexOf("url_de_la_page_de_niveau_1")==0) {

                    x.src="url_image_entête_pour_cette_page_et_sous-pages";}

                if (url.indexOf("url_de_la_page_de_niveau_1")==0) {

                    x.src="url_image_entête_pour_cette_page_et_sous-pages";}

                ... Ajoutez autant de blocs if (...) {...} que nécessaire.

                /* ]]> */

                </script>

Rappels et lien utile

Pour ce tuto, on est amené à vérifier ou à trouver les identifiants et parfois les caractéristiques de style de quelques éléments HTML de notre page.

Ce message en guise de tutoriel sur le forum décrivant l'usage de Firebug est incontournable pour les utilisateurs de FireFox.

Il faut savoir qu'il existe l'équivalent avec Internet Explorer (Outils, Outils de développement) au moins en version 8. Voici 2 exemples (cliquez sur les images pour les voir en vraie grandeur) de ce qu'on obtient.

Pour illustrer le cas de mise en page standard Jimdo :