Vous désirez rendre plus convivial l’accès à vos pages Web ? Pour cela, le logiciel The Gimp permet de créer des liens non pas sur des boutons ou sur du texte, mais dans des zones situées à l’intérieur d’une image. Voici comment créer ces zones avec le filtre Image cliquable de ce logiciel, comment le tester et l’insérer dans une page Web de votre site.
Patricia Frein (Carm2i)
Etape 1 : préparez l’image
1 Ouvrez l’image qui doit contenir les zones cliquables, ici la carte de la France (voir l’illustration 1).2 Dans la barre des menus en haut de l’image ouverte, cliquez sur Filtres, puis sur Web et sur Image cliquable Web :
Etape 2 : créez les zones cliquables
La fenêtre Image Map s’affiche. Vous avez, dans le volet gauche, l’image où vous allez tracer les zones cliquables et, à droite, le nom de l’élément (image, page Internet, fichier, etc. ) lié à cette zone. Ce dernier s’ouvrira lorsque vous cliquerez dessus. Cette liste est pour l’instant vide. Voici comment créer les zones et leurs liens.1 Pour commencer, délimitez une zone. Pour cela, à gauche de l’image, le logiciel propose trois formes de zone réactive : rectangulaire, circulaire ou polygonale. Ici, cliquez sur le bouton Définir une zone polygonale :2 Si l’image est trop petite et que vous avez dû mal à tracer la zone, augmentez le zoom en cliquant en haut de l’image sur le bouton Zoom avant :3 Placez le pointeur de la souris à l’endroit où doit commencer la zone réactive, et cliquez :Déplacez le pointeur : un trait en pointillé rouge suit le pointeur. Cliquez pour fixer un deuxième point :Continuez jusqu’à entourer la zone. Pour fermer la sélection, double-cliquez sur le premier point qui a commencé la sélection.4 Dans la fenêtre qui s’ouvre, indiquez le lien à utiliser. Pour cela, cochez dans la zone Type du lien, le genre d’élément qui doit s’ouvrir : site Web, site FTP, Fichier, Messagerie, etc. Ici, pour ouvrir une image, cochez la case :Remarque : si vous choisissez d’ouvrir une page d’un site Web, cochez la case site Web dans la partie Type de lien et tapez dans la zone URL à activer lorsque cette zone est cliquée, l’adresse de la page, par exemple www.01net.com.5 Indiquez où se trouve l’image en cliquant sur le bouton, à droite de la zone URL à activer lorsque cette zone est cliquée :Recherchez son emplacement en double-cliquant dans le volet gauche sur le nom des dossiers, ici dans …/Mon site Web/France, puis dans la partie droite, cliquez sur son nom, par exemple :Cliquez sur Ouvrir et sur Valider. La photo qui s’ouvrira lorsque vous cliquerez dans cette zone se trouve dans l’illustration 2.6 Dans le volet droit de la fenêtre Image Map apparaît le nom de l’image (ou l’adresse de la page Web, etc. ) :Cliquez dessus : le tracé de la zone cliquable apparaît dans l’image à gauche de la fenêtre. Les carrés rouges indiquent les points du tracé (voir l’illustration 3).Si un de ces points est mal placé dans l’image :déplacez-le en cliquant à gauche de la fenêtre surPuis effectuez un cliquer-glisser du point vers l’endroit où il doit être :7 Répétez les points de cette étape pour créer d’autres zones cliquables.
Etape 3 : mémorisez l’image cliquable
1 Enregistrez le fichier au format .map afin de pouvoir le modifier plus tard. Pour cela, choisissez dans le menu Fichier l’option Enregistrer sous et indiquez où enregistrer le fichier : de préférence au même endroit que les images, ici dans …/Mon site Web/France. Dans la zone Nom, tapez son intitulé suivi de l’extension .map, par exemple France.map :Cliquez sur le bouton Enregistrer.Remarque : quand vous voudrez modifier l’image cliquable, ouvrez une image au hasard dans The Gimp, puis répétez le point 2 de l’Etape 1. Choisissez, dans le menu Fichier, l’option Ouvrir. Recherchez dans …/Mon site Web/ France et double-cliquez sur le fichier France.map.2 Pour pouvoir utiliser cette image dans votre site Web, sauvegardez le fichier au format .html. Pour cela, répétez le point 1 de cette étape, et nommez le fichier France.html. Cliquez sur Enregistrer, puis fermez le logiciel.
Etape 4 : intégrez l’image dans une page Web
1 Vérifiez que l’image cliquable fonctionne. Pour cela, à partir du dossier …/Mon site Web/Images double-cliquez sur le fichier France.html. Votre navigateur Web ouvre la page contenant l’image. Cliquez dans celle-ci sur une des zones cliquables créées. L’élément associé s’ouvre. Fermez le navigateur.2 Pour intégrer l’image à une page Web de votre site, copiez le code source dans celui de votre page Web. Pour cela, ouvrez le fichier .html dans un éditeur de texte comme le Bloc-notes de Windows. Sélectionnez et copiez le code. Puis ouvrez votre page Web dans le même éditeur et collez le code à l’endroit désiré. Testez votre page Web.Remarque : si l’image cliquable ne fonctionne pas, remettez les bons chemins (vers les images) dans le code source. Ils se trouvent à la fin des lignes qui commencent par
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
