Afin de rendre plus convivial l’accès à vos pages Web, nous vous proposons de remplacer les boutons, ou les textes, par une image découpée en zones cliquables. A vous de préciser l’action du clic sur chacune des zones : l’ouverture d’un fichier, d’une page Web… Voici comment créer ces zones avec le filtre Image cliquable de The Gimp, comment les tester et insérer l’image dans votre site Web
Patricia Frein (Carm2i)
Étape 1 : Préparez l’image
1 Ouvrez l’image qui doit contenir les zones cliquables, ici la carte de Paris avec des monuments (voir l’illustration 1). Pour éviter les fausses manœuvres sur l’image d’origine, dupliquez-la en choisissant dans le menu Image l’option Dupliquer.2 Choisissez, dans le menu Filtres, l’option Web et cliquez sur Image cliquable Web.
Étape 2 : Créez les zones cliquables
La fenêtre nommée Image Map s’affiche. Dans le volet gauche, vous obtenez l’image sur laquelle vous allez tracer les zones cliquables. Dans le volet droit apparaîtra le nom de l’élément (image, page Internet…) lié à cette zone. Ce dernier s’ouvrira quand vous cliquerez dessus. Cette liste est pour l’instant vide. Vous devez créer les zones avec leurs liens en suivant les manipulations suivantes.1 Délimitez la première zone cliquable dans l’image en choisissant, à gauche de cette dernière, l’une des trois formes de zone réactive : rectangulaire, circulaire ou polygonale. Ici, cliquez sur le bouton Définir une zone rectangulaire :2 Pour faciliter la sélection de la zone cliquable, vous pouvez augmenter 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 vers le bas et la droite : un cadre en pointillé suit le pointeur. Entourez l’élément qui doit être cliquable, ici l’Arc de Triomphe :Cliquez pour terminer la sélection de la zone.4 Indiquez le lien à utiliser. Pour cela, cochez, dans la zone Type du lien, le type d’élément qui doit s’ouvrir : site Web, site FTP, Fichier, Messagerie, etc.Ici, pour ouvrir une page Web, cochez la case Site Web. Puis tapez dans la zone URL à activer lorsque cette zone est cliquée, l’adresse de la page, ici http://arc-de-triomphe.monuments-nationaux.frRemarque : si vous voulez ouvrir une photo, cochez la case Autre dans la zone Type de lien et cliquez sur le bouton Parcourir dans la zone URL à activer lorsque cette zone est cliquée :Recherchez l’image en double-cliquant dans le volet gauche sur le nom du dossier qui la contient, ici dans … /Mon site/Monuments, puis dans la partie droite, cliquez sur son nom et sur Ouvrir.5 Confirmez votre choix en cliquant sur le bouton Valider. Dans le volet droit de la fenêtre Image Map apparaît l’adresse de la page Web (ou le nom de la photo, etc.) :Cliquez dessus. Le tracé de la zone cliquable apparaît dans l’image.6 Pour agrandir ou diminuer la zone, cliquez, à gauche de l’image, sur le bouton Sélectionner la zone existante :Puis cliquez sur l’un des carrés rouges et effectuez un cliquer-glisser vers l’intérieur ou l’extérieur du cadre de sélection (voir l’illustration 2).7 Répétez les points de cette étape pour créer d’autres zones cliquables.
Étape 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. Indiquez l’emplacement de la sauvegarde : de préférence au même endroit que les images, ici dans …/Mon site/Monuments. Dans la zone Nom, tapez son intitulé suivi de l’extension .map, par exemple Monuments.map. Cliquez sur 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’étape 1. Choisissez ensuite, dans le menu Fichier, l’option Ouvrir. Recherchez dans …/Mon site/ Monuments, et double-cliquez sur le fichier Monuments.map.2 Pour utiliser cette image dans votre site Web, sauvegardez-la au format .html en répétant le point 1 de cette étape et nommez le fichier Monuments.html. Cliquez sur Enregistrer.3 Quittez Image Map en choisissant, dans le menu Fichier, l’option Quitter. Puis quittez The Gimp en choisissant, dans le menu Fichier, l’option Quitter.
Étape 4 : Intégrez l’image dans une page Web
1 Vérifiez que l’image cliquable fonctionne. Pour cela, rendez-vous dans le dossier …/Mon site/Monuments avec Windows, puis double-cliquez sur le fichier Monuments.html. Votre navigateur ouvre la page contenant l’image. Dans celle-ci, cliquez sur l’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 de la même façon 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.
