Introduction
L’idée de cette ressource est d’apprendre à créer des zones cliquables sur une image qui renvoient à des liens sur internet. L’image doit être publiée sur une plateforme en ligne pour que cela fonctionne. Une image c’est plus sympa que du texte. Et avec la magie d’internet, on peut faire plein de trucs chouettes ! Les images cliquables peuvent s’avérer utiles quand on crée des cartographies ou des schémas. On peut aussi faire un menu de site internet à destination des élèves. Plutôt que d’avoir la liste des sections sous forme de texte, les catégories peuvent être symbolisées par des images. Dans l’exemple donné, j’ai fait une cartographie de recherche où l’on peut cliquer sur différentes zones pour accéder à des liens et ainsi mieux comprendre à quoi chaque partie se réfère. Les liens peuvent renvoyer vers n’importe quelle url, par exemple vers une vidéo youtube, vers d’autres pages d’un même site web, vers un document pdf en ligne…

Prérequis

- Connaitre les bases de manipulation d’images dans Gimp

- Connaitre les bases de publication de contenu sur un blog ou un site internet

 Étapes

1.     Préparer l’image que l’on veut rendre cliquable en format jpeg ou png, et la publier sur internet (on aura ensuite besoin de l’url de l’image).

 

2.     Ouvrir l’image dans Gimp. On va à présent créer une sorte de calque invisible qui va apparaître par-dessus notre image.

 

3.     Aller dans le menu Image cliquable Web en cliquant sur Filtres puis en sélectionnant Web puis Image cliquable Web.

4.     Maintenant il faut sélectionner les zones que l’on veut rendre cliquables. Choisir le type de zone que l’on veut créer (rectangle, cercle ou polygone), puis sélectionner une zone.

5.     Une fois la zone définie, une boîte de dialogue s’ouvre. Il suffit alors de rentrer l’url vers laquelle la zone doit renvoyer. Les liens peuvent renvoyer vers n’importe quel type de contenu web.

6.     Répéter l’opération pour chaque zone cliquable.

 

7.     Une fois les zones définies, enregistrer les modifications. Un fichier .map est créé.

 

8.     Ouvrir avec un éditeur de texte comme TextEdit le fichier .map. Dans la première ligne de code, remplacer le nom de l’image entre guillemet par l’url de votre image en ligne.

9.     Dans votre système d’édition de site internet ou de blog, copier-coller les lignes de code du fichier .map dans la publication que vous voulez créer.

10.  Publier le contenu. Votre image devrait apparaître avec les zones cliquables ! Quand on passe au dessus des zones cliquables, la souris les met en évidence en changeant d’aspect. Prendre soin de vérifier que les liens fonctionnent, et corriger l’url dans gimp si besoin.
C'est terminé!

 

NB : L’image a besoin d’être hébergée en ligne pour que les liens fonctionnent. On ne crée pas réellement une image cliquable, mais plutôt une page web avec une image avec des zones cliquable.