Blog du Prof T.I.M.

Technologies Informatique & Multimédia – Lycée du Mené

Tuto : Image web cliquable avec Gimp


Je n’avais encore pas eu besoin de créer des images cliquables pour le site web. C’est chose faite avec la création d’un plan des formations de l’établissement.

L’occasion de présenter une nouvelle fonctionnalité de l’excellent GIMP.

1- Produire une image en prenant soin de lui donner les dimensions attendues sur le site. Après l’avoir ouvert avec GIMP, lancer le menu Filtres > Web > Image cliquable web.

01

2- À l’aide des outils à gauche, dessiner des zones sur l’image aux endroits où l’on souhaite insérer des liens. Il faut ensuite paramétrer chaque zone en double cliquant dessus dans la liste à droite de l’écran. Dans l’exemple, il s’agit d’un simple lien web. On peut également insérer du code JavaScript.

02

3- Enregistrer la carte de l’image cliquable au format map.

03

4- Téléverser l’image sur votre site et récupérer son adresse web. Éditer le code du fichier map (dans un éditeur de texte, type bloc note). Il faut modifier le fichier source de la carte cliquable en mettant l’adresse de l’image sur le web.

04

5- Insérer le code contenu dans le fichier map dans votre page web.

Kenavo.

Articles sur le même thème


8 réponses à “Tuto : Image web cliquable avec Gimp”

  1. Bonjour votre tuto est très instructif, malheureusement je me plonge petit à petit dans le site internet de la structure où je travaille mais il me manque quelque base, pour l’insertion des liens je suis ok c’est pour la partie insertion de l’image sur un site que j’ai plus de difficultés. En résumé je peine pour les étapes 4 et 5 pourriez vous m’aider ?

    Cordialement

  2. Bonjour Laura
    Il vous faut envoyer l’image sur votre site et en récupérer l’adresse. Par exemple, dans WordPress, cela se trouve dans la partie média. Une fois cette adresse récupérer il faut l’injecter dans le fichier map.
    Pour la dernière étape, il faut utiliser l’éditeur d’article de votre site et passer en mode « texte » ou « html » et y coller le code contenu dans le fichier map.
    @ bientôt sur le blog.

  3. Bonjour, Super tuto merci. j’ai besoin de faire un mappage d’une image pour l’insérer dans une sharepoint.
    Tout fonctionne, hormis une seule chose : les « zones cliquables » sont décalées. Sur le fichier .map pas de pb, mais une fois le code insérer dans SP, la zone n’est plus à sa place. Merci pour votre aide.

  4. Bonjour
    J’ai eu ce soucis une fois et c’était parce que l’image n’était pas à 100% de sa taille dans ma page web, du coup les zones cliquables n’étaient plus aux bons endroits. Je ne sais pas si c’est le même problème pour vous.
    @ bientôt sur le blog.

  5. Bonjour,
    Merci pour ce tuto! Je souhaite insérer une telle image cliquable sur notre page facebook. Savez-vous comment il faut procéder vous plait?

  6. Bonjour Anne
    Je ne suis pas sûr que cela soit faisable. Peut-être existe-t-il une app sur Facebook qui le permet.
    @ bientôt sur le blog.

  7. Bonjour,
    Merci pour ce tuto. Je voudrais savoir si c’est faisable pour une image envoyé dans un mail ?
    Je souhaite faire une newsletter avec lien cliquable, à envoyer par mail, mais je n’arrive pas à insérer de lien dans mon image.
    Merci 🙂

  8. Bonjour. Cela doit être inséré dans un site web. Pour faire une newsletter, il existe des extensions pour WordPress. J’utilise MailPoet.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Aller au contenu principal