mardi 4 mars 2014

Créer une image cliquable avec gimp

Gimp est un logiciel d'image gratuit, on pourrait le comparer à photoshop.
Nous allons utiliser un filtre de gimp pour créer une image cliquable.
Nous n'utiliserons pas de boutons, ni de feuilles de style, mais uniquement du code texte.
Avec une seule image, nous ajouterons des coordonnées pour mettre des liens sur des zones définies.

Imaginez une carte de France, si on devait ajouter des liens avec des boutons sur chaque ville, on aurait énormément d'images à charger.
Le principe de l'image map, c'est de charger qu'une seule image, toutes les zones définies seront que des points de coordonnées en format texte.

Pour utiliser ce genre d'images sur votre blog ou site web, il suffira d'héberger l'image et placer un code sur votre page web.

Pour vous aider à créer votre image map, vous pouvez enregistrer le modèle ci-dessous et l'ouvrir avec gimp.
Ne redimensionnez pas l'image, vérifier la taille 300x300.

creer image map

Cet exemple comporte 4 boutons dessinés, une forme rectangulaire et 3 formes cercle.
Nous allons ajouté des coordonnées à ces 4 formes et ouvrir des liens lors du clic.

Dans gimp,sélectionnez  Filtres / Web / Image Cliquable Web.

On va commencer par faire le bouton rectangulaire (lien 1)
Cliquez sur la forme rectangle sur la gauche, et placez-le en double cliquant.

Maintenant, on ajuste les positions.


Dans le menu, l'onglet Rectangle, cochez la case Aperçu.
Ajuster la zone, vous pouvez zoomer pour plus de précision.
Puis Appliquer, aller sur l'onglet Lien et ajouter le lien sur cette zone.


Cochez site web et ajouter votre lien, vous pouvez renseigner un texte alternatif.

Faites la même chose pour les 3 autres boutons, on utilisera plus la forme rectangle mais cercle !


Voila le résultat, 4 zones, 4 liens, j'ai mis des liens pour l'exemple, vous pouvez mettre ce que vous voulez à la place.

Une fois fini, il suffit de cliquer sur Fichier et enregistrer sous , vous aurez un fichier avec une extension .map .
Ce fichier s'ouvre avec le bloc note ou notepad par exemple.

Vous devriez avoir ceci :
<img src="lien image.jpg" width="300" height="300" border="0" usemap="#map" />
<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:Thierry -->
<area shape="rect" coords="75,40,224,75" alt="Site" href="http://www.debrouilletoi.fr/" />
<area shape="circle" coords="65,175,25" alt="Google" href="http://www.google.fr/" />
<area shape="circle" coords="150,175,25" alt="Facebook" href="http://www.facebook.com/" />
<area shape="circle" coords="233,175,25" alt="Twitter" href="http://twitter.com/" />
</map>

Il ne vous reste plus qu'à héberger votre image, ajouter le lien de l'image dans le fichier map et ajouter le code map sur votre page html.

Site Google Facebook Twitter

Vous pouvez tester cette dernière image, à vous de créer vos propres image map.
@ bientôt.

8 commentaires :

  1. Hello, I have been visiting your blog. ¡Congratulations for your work, good luck with your blog! I invite you to visit my blog about literature, philosophy and films:
    http://vniversitas.over-blog.es

    RépondreSupprimer
  2. Bonsoir,

    je ne comprends pas la dernière partie.
    Sous gimp, j'ai crée une carte de la france avec plusieurs liens renvoyant vers d'autres sites.
    J'ai bien mon code de mon image cliquable .map, ensuite j'ai hébergé mon image (c'est bien mon image d'origine???) mais la suite je n'y arrive pas.
    Si je copie les codes ça ne marche pas
    si je copie les codes en y insérant le lien de l'image (d'ailleurs où précisemment?) ça ne marche pas....

    Pouvez-vous me donner ces précisions svp?

    Merci

    RépondreSupprimer
  3. Bonjour, le lien de l'image se met à la première ligne du code map (img src =) , vous devez remplacer le lien de l'exemple par le votre.
    Relevez le lien de votre image chez votre hébergeur,(exemple:http://votreimage.jpg), et ajoutez-la dans le code, copiez l'ensemble du code sur votre page html.
    Vous pouvez me donner le lien de votre site ou blog qui contient le code map ?

    RépondreSupprimer
  4. bonjour,
    merci bcp mais ça ne marche tjs pas.
    Voici le blog pour l'instant (je souhaite le mettre en ligne en janvier dc les billets ne st pas encores visibles mais en brouillon). Je mets l'article de cette carte française qui voudrait renvoyer vers d'autres sites pour que vous puissiez voir ce qui se passe.
    L'aperçu montre tout le code mais pas du tout l'image et je ne comprends pas pourquoi.

    Merci de bien vouloir m'aider et de prendre du temps pour ça.

    http://laballeapicots.blogspot.fr/

    RépondreSupprimer
  5. Bonjour, il y a 2 problèmes à votre code :

    * le lien de l' image n'est pas le bon, vous devez prendre son lien direct (l'image doit s'afficher seule sur votre navigateur), remplacez votre lien par celui-ci : http://nsa34.casimages.com/img/2014/11/18/141118065636409192.jpg

    * ensuite, lors de la rédaction de votre article sur blogger, vous avez 2 onglets (rédiger et html) cliquez sur le bouton html et collez votre code complet.

    Attention, les liens ne seront pas actifs en mode 'aperçu'.
    Je n'ai pas vérifié les coordonnées, je vous en laisse le soin, mais ça devrait s'afficher sans soucis.
    Cordialement.


    RépondreSupprimer
  6. Attention les tailles (width et height) de votre image, elles doivent correspondre dans votre code map, sinon vos coordonnées seront fausses.

    RépondreSupprimer
  7. Ça marche!!!!!! Merci tellement!!!

    Je suis si étonnée de votre réactivité et le temps que vous accordez aux autres. Merci bcp bcp!!!!

    RépondreSupprimer