Annonce ■ Un header "cliquable" en tout ou partie pour un lien hors page accueil

[ un "bricolage" pour faire suite à une question exprimée dans "besoin d'aide" ]

l'objectif: rendre cliquable tout ou partie de l'en-tête (header) pour une cible hors page d'accueil

l'idée: superposer au header une image transparente avec le lien souhaité.

le truc : placer le code dans un module simple avec adressage du positionnement de l'image sur le header

mon code, testé:
<p><a href="url de la page à afficher"><img style="position: absolute; top: 0px; left: 0px;" src="url image transparente" alt="" width="1100" height="200" /></a></p>

 infos:
● image transparente utilisée (100 x 100 pixels) :   http://ekladata.com/17TImRv_HUCIR_w-7bo6DlTuyBo.gif

 ● Pour  width="1100" height="200"   les valeurs sont à adapter selon la taille voulue pour la surface sensible au clic (utilisation d'une image non transparente pour valider le choix)

 ● solution d'un problème qui fut difficile, pour que l'image transparente soit bien positionnée, il me faut ce css  :
#background {position:relative;}  

 ● si on recouvre la moitié gauche de la surface du header et que le titre est sur la moitié droite  on dispose de deux choix (un lien hors accueil et un lien vers l'accueil classique). Comme l'image cliquable est transparente il est possible d'écrire le titre du lien sur l'image de fond.

Bonsoir,

merci beaucoup. ça fonctionne très bien sauf que je ne peut pas mettre le css sinon le mon thème est complètement détruit à l'arrière plan sur la page des chroniques car ce code rentre apparemment en conflit avec le code iframe de mon animation. J'ai testé en enlevant et avec. Il y aurai pas moyen de faire quelque chose s'il vous plait ?

Pour moi il m'a été nécessaire d'écrire ce css car je voulais recouvrir le header avec précision (même avec effet zoom). Sinon je devais mettre des valeurs très importantes pour width afin de toujours recouvrir le header.

Pour le moment je ne vois pas d'autre piste. Peut être harmoniser les codes de positionnement s'il y en a ailleurs ?

A suivre ...
--------------------------------
Edit : actuellement sur le blog "notre vie est une histoire"  je vois que le code css est en place et dans "Mes Chroniques" l'animation flash fonctionne (ce n'est pas une iframe au sens html mais l'insertion d'une animation. Pas d'expérience pratique sur le sujet)
C'est ok avec mes navigateurs Firefox et Internet Explorer.
L'anomalie 'est sur quelle page ?

Bonjour !

En fait ça ne m'aide qu'à moitier. Ce n'est pas vraiment ça que je veux...
C'est difficile à expliquer :/ Je te mets un lien : http://lelyceesweetamoris.eklablog.fr/-a114774912

Voilà! Est-ce que tu saurrais comment fire ça s'il te plaît ! Merci d'avance :)

Bonjour,

Il s'agit là d'un autre sujet.

Pour placer le menu de l'en-tête c'est dans Apparence > Modifier le thème > En-tête > Menu
Là tu pourras le placer en colonne et à gauche, + choisir les couleurs etc..

Pour définir les liens c'est par Apparence > Menu de l'en-tête
---------------
Si ma réponse n'est pas satisfaisante, il faudra reformuler ta question dans "Besoin d'aide" du forum en précisant comme ici ta demande exacte.
Merci de ta compréhension.

Ca m'aide beaucoup, Merci !

Merci beaucoup! Grâce à cette astuce, mon header est de nouveau cliquable! ;-)

Bonsoir,

Ce qui est notable, c'est surtout que la modification apportée dernièrement par EB sur le header, n'a pas affectée le fonctionnement de cette astuce. Et ça lui donne même un usage de plus.

A ce jour, sur le blog atelier du chateau je l'utilise pour avoir 2 pages d'accueil : "Ecran d'accueil" (accueil au sens Blog) et "Bienvenue" (accueil en pratique). Un clic sur le titre du blog renvoie uniquement sur la page "Bienvenue".