Créer une bannière avec menu en images cliquables grâce à GIMP

Ceci est article de Phil du blog Coccxyphil.

Salut à tous, voici un petit tuto qui vous permettra d’avoir une bannière avec un menu en images cliquables en son sein. Mise à part le temps passé pour la création de l’image, il ne faut pas s’inquiéter pour la taille du mode d’emploi : en fait, il m’a fallu beaucoup moins de temps pour mettre mon menu sur orbite que pour faire le tuto …

Avant de commencer : attention, l’image doit bien entendu être compatible avec la « largeur » du blog (ici 980px pour le blog et l’image) !! Faites donc vos réglages au préalable, sinon : problèmes …

Pour réaliser cette astuce, il est important de posséder l’éditeur d’image GIMP (vous pouvez le télécharger ici).

1/ Préparer l’image avec gimp, les calques pour les zones de textes, etc …

- Quand vous avez fini la conception de votre image, dans un premier temps enregistrez-le au format « GIMP » : voir « Enregistrer sous », au bas, développer « sélectionner le type de fichier » à choisir IMAGE GIMP XCF

Vous aurez ainsi tout loisir pour rajouter plus tard des menus sans reprendre tout à zero …

- Ensuite, la réenregistrer au format plus habituel jpg …

Cela donne, par exemple, pour ma bannière (J’ai préparé les différents titres qui deviendront plus tard mes menus de navigation…)

:

2/ Se connecter dans BLOGGER

Aller sur « Mise en page » puis « Modifier » l’en tête pour mettre l’image au format jpg dans la bannière du blog …

Pour cela, après avoir cliqué sur « modifier » pour le widget en-tête, dans la pop-up qui s’ouvre, choisir :

à Importer une image

à Substituer au titre et à la description

3/ Affichez vote blog

Vous avez maintenant une belle bannière (qui ne sert encore qu’à faire beau). Récupérez l’adresse de cette image. La noter … (par exemple, avec Firefox, faire « copier l’adresse de l’image », puis collez l’adresse dans un fichier Word, wordpad ou notepad.

L’url en question aura cette forme :

http://1.bp.blogspot.com/_dbI1dBfeX2s/SsJhhLycgsI/AAAAAAAAIbs/ZaZap-UFsnk/S1600-R/blanc.jpg

Cette adresse vous servira plus tard.

4/ Maintenant, reprendre notre image sauvegardée sous format GIMP :

Puis, aller dans les menus filtre>>web>>image cliquable

Vous verrez une nouvelle fenêtre apparaître, dans laquelle vous allez créer vos menus :

Sur la gauche, en fonction de ce que vos voulez faire, choisir zone rectangulaire, ou ronde, …

Sélectionnez votre première zone cliquable avec la souris, vous verrez une nouvelle fenêtre apparaître. Cochez « site web » (vous pouvez adapter au besoin : messagerie, …)

Mettez l’URL de la page vers laquelle sera dirigé le visiteur après avoir cliqué sur le nom du menu. Ajoutez éventuellement un texte alternatif …

Faire appliquer, valider, et recommencer de même avec toutes les zones que l’on veut rendre « cliquable » … Attention à ce qu’elles ne se chevauchent pas.

Voilà, c’est presque prêt …

Quand tout est prêt, faire « enregistrer sous » … GIMP propose d’enregistrer le plan de l’image sous le nom « nomdevotreimage.jpg.map » à remplacer par « nomdevotreimage.txt »

5/ Maintenant, ouvrir ce fichier texte …avec le bloc-notes

Chez moi, ça donne (j’ai raccourci) :

<img border="0" usemap="#map" width="980" src="MONDEVOTREIMAGE.JPG" height="300"/>

<map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in -->

<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:2.3 -->

<!-- #$AUTHOR:phil -->

<area shape="rect" coords="826,61,875,83" alt="Retour à l&apos;accueil" href="http://coccxyphil.blogspot.com/"/>

ETC … ETC … 

</map>

Il faut remplacer l’adresse de l’image donnée par GIMP ci-dessus EN ROUGE par l’adresse copiée au point 3, soit l’adresse réelle de votre bannière sur votre blog :

<img border="0" usemap="#map" width="980" src=" http://1.bp.blogspot.com/_dbI1dBfeX2s/SsJhhLycgsI/AAAAAAAAIbs/ZaZap-UFsnk/S1600-R/blanc.jpg

" height="300"/>  

ETC … ETC … 

Tout est prêt …

Voilà pour exemple, la totalité du fichier de mappage pour notre site, à copier puis à coller dans blogger, avec la bonne adresse pour l’image :

<img border="0" usemap="#map" width="980" src=" http://1.bp.blogspot.com/_dbI1dBfeX2s/SsJhhLycgsI/AAAAAAAAIbs/ZaZap-UFsnk/S1600-R/blanc.jpg

" height="300"/>

<map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in -->

<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->

<!-- #$-:Please do not edit lines starting with "#$" -->

<!-- #$VERSION:2.3 -->

<!-- #$AUTHOR:phil -->

<area shape="rect" coords="826,61,875,83" alt="Retour à l&apos;accueil" href="http://coccxyphil.blogspot.com/"/>

<area shape="rect" coords="852,105,938,135" href="http://coccxyphil.blogspot.com/search/label/N%C3%A9pal?max-results=5"/>

<area shape="rect" coords="872,158,949,190" href="http://coccxyphil.blogspot.com/search/label/Italie?max-results=5"/>

<area shape="rect" coords="818,217,928,245" href="http://coccxyphil.blogspot.com/search/label/Espagne?max-results=5"/>

<area shape="rect" coords="15,217,103,243" href="http://coccxyphil.blogspot.com/search/label/Vercors?max-results=5"/>

<area shape="rect" coords="118,220,230,242" href="http://coccxyphil.blogspot.com/search/label/Chartreuse?max-results=5"/>

<area shape="rect" coords="250,222,371,244" href="http://coccxyphil.blogspot.com/search/label/Belledonne?max-results=5"/>

<area shape="rect" coords="383,224,521,243" href="http://coccxyphil.blogspot.com/search/label/Ailleurs?max-results=5"/>

<area shape="rect" coords="539,223,607,243" href="http://coccxyphil.blogspot.com/search/label/Vid%C3%A9os?max-results=5"/>

<area shape="rect" coords="619,221,667,243" href="http://coccxyphil.blogspot.com/search/label/jeux?max-results=5"/>

<area shape="rect" coords="680,221,774,245" href="http://coccxyphil.blogspot.com/search/label/Trombino?max-results=5"/>

<area shape="rect" coords="129,257,257,285" href="http://coccxyphil.blogspot.com/search/label/Topo%20rando?max-results=5"/>

<area shape="rect" coords="285,261,427,288" href="http://coccxyphil.blogspot.com/search/label/Topo%20escalade?max-results=5"/>

<area shape="rect" coords="461,262,565,290" href="http://coccxyphil.blogspot.com/search/label/Paratruc?max-results=5"/>

<area shape="rect" coords="597,264,703,288" href="http://coccxyphil.blogspot.com/search/label/Grimpe?max-results=5"/>

<area shape="rect" coords="69,9,800,197" href="http://coccxyphil.blogspot.com/"/>

</map>

6/ Connectez-vous à nouveau sur votre compte blogger,

Allez sur « Mise en page », « modifier le code html », puis cochez la case « développer les modèles de gadgets ». Faites une sauvegarde de votre modèle complet, au cas où …

Chercher :

<div id='header-inner'>

<a expr:href='data:blog.homepageUrl' style='display: block'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>

Remplacez tout ce qui est en rouge par le code de mappage que vous venez de créer …

Enregistrez … Le tour est joué !

Allez sur votre blog : un beau menu qui marche ! Bien ça J

Ça fonctionne sur notre blog : http://coccxyphil.blogspot.com Et je viens de créer un blog test avec les mêmes images pour faire les copies d’écran, même résultat …

A+

Vous pouvez retrouver Phil sur son blog Coccxyphil, où il se fera un plaisir de répondre à vos questions et vous faire découvrir son univers pas comme les autres. Pour s’abonner à son blog, cliquez sur le lien suivant.