• Placer un élément dans le header

    Script Corrigé pour prendre en compte Internet Explorer

    Cet autre tuto est lui aussi inspiré de demandes formulées sur le forum officiel.

    Via l'éditeur, on peut agir sur l'image de fond, le titre et le menu du header. Mais comment faire pour y ajouter une image, un diaporama ou tout autre élément ?

    Avec du javascript bien sûr !
    J'ai incorporé le diaporama flash dans le header de ce site avec la méthode décrite ci-dessous.

    Principe général

    On va commencer par créer l'élément que l'on souhaite voir affiché dans le header dans une balise div en lui donnant une id spécifique (monobjet dans le code ci-dessous).

    Cette balise va être créée dans un module simple de l'un des menus afin que l'élément existe dans chacune des pages du blog.

    Pour terminer, une petit code javascript va se charger de copier cette balise dans le header (sous le nom objet_copie) puis va la supprimer.

    Le code ci-dessous va afficher une video Youtube dans le header à 705 pixels du bord gauche et 50 pixels du haut.

    Donc vous l'avez compris, il faut modifier ces deux valeurs en fonction de la position que vous souhaitez.

    Pour l'appliquer à votre blog:

    1. Copiez tout le code ci-dessous
    2. Collez-le dans un module simple de l'un de vos menus
    3. Remplacez la partie entre <div id="monobjet">  et </div>  par ce que vous voulez: vidéo, image, lien, tableau etc..
    4. Fixez les dimensions (705px et 50px dans le code ci-dessous)
    5. Enregistrez, raffraichissez votre page et admirez

     

     

    Note sur la correction du code.

    Internet Explorer connait un bug pour l'utilisation de la propriété innerHTML. Pour le contourner, il faut encapsuler l'objet dans un autre. Ainsi, pour récupérer la propriété innerHTML de monobjet, il faut placer ce dernier sous une autre balise (forIE dans l'exemple)

     

    Tout ce qui est à l'intérieur de la balise div "monobjet" sera copié à l'identique dans le header. Votre balise peut bien évidemment contenir plusieurs éléments selon ce que vous souhaitez.
    Vous pourrez agir sur le CSS via le sélecteur #objet_copie