The Gimp - image cliquable web, bitmap

The Gimp - image cliquable web Il s'agit de générer automatiquement un code html, en partant d'une image quelconque. Ce code (que l'on enregistrera sous forme d'une page html), permet de rendre actives certaines zones de l'image, créant un ou plusieurs hyperliens.

Prenons comme exemple le cas d'une carte (cadastre du Forum des Halles à Paris), sur laquelle on a dessiné des zones, que l'on souhaite lier à des photos du site. Je vais lier les zones en orange et vert aux quatre photos correspondantes.

Ouvrir l'image avec Gimp.

Cliquer avec le bouton droit de la souris au milieu de l'image, pour obtenir le menu des différentes options. Chercher Filtres, Web puis Image cliquable Web.

Le plugin image Map apparaît avec l'image de la carte dupliquée (vous pouvez fermer la première pour gagner de la place en mémoire). Il existe de nombreuses possibilités avec ce plugin, mais je n'en ferais qu'un bref apperçu (d'autres didacticiels suivront plus tard).

Le menu 1 (ou barre d'outils n°1) sert à déterminer les zones (ronde, carrée ou irrégulière). La partie 2, présente et trie les hyperliens créés.

Cliquer sur le cercle (bouton gauche), puis au milieu d'une zone de la carte, cliquer de nouveau. Agrandir le cercle autant que nécessaire.

Cliquer une dernière fois pour en valider la taille. La fenêtre des liens apparaît aussitôt.

Dans le cas de mon exemple, entrer le nom de la photo escalier1.jpg dans URL à activer (sans le chemin si dans le même répertoire que le code html). Dans le Type de lien, choisir Autre (ici une image, sans plus de précision). Lien relatif activé, permet d'éviter les erreurs de chemin, quelque soit le répertoire où vous déciderez de placer ensemble, le fichier html et les images.

Cliquer sur Valider. La fenêtre se ferme et on peut alors voir dans la partie 2, l'affectation de la zone créée, ainsi que sa forme.

Penser à enregistrer de temps en temps le travail, pour éviter de tout perdre en cas d'erreurs de manipulations (la petite disquette en haut à gauche - ici carte.html). En ouvrant le fichier sous votre navigateur, vous pouvez vérifier immédiatement si vous n'avez fait aucune erreur.

Avec la flèche noire, vous pouvez déplacer la zone créée, si sa position n'est pas satisfaisante. Vous pouvez aussi changer la taille de la zone, en cliquant sur les petits carrés rouges.

Ensuite, créer les autres zones, choisissant la forme le plus adaptée. Pour mon exemple, j'ai placé un rectangle en bas et une forme irrégulière pour la zone orange en haut (pour cette forme, double clique gauche pour la fermer).

La barre d'outils placée entre l'image et la partie 2, sert à éditer les zones créées. La croix sert à supprimer une zone, le crayon sert à modifier le lien d'une zone   .

Il est possible d'ajouter un commentaire à une zone, qui sera visible quand la souris passe au dessus de la zone, dans le fichier html.

Il est possible d'ouvrir une page html déjà créée pour la modifier, en passant par Image Map. On peu également la modifier avec un éditeur html, comme Star Office, directement en modifiant le code. Je vous conseil enfin de vérifier le lien avec l'image, sur le fichier html ainsi créé. Il est possible, qu'une fois votre page déplacée sur votre site, l'image n'apparaisse pas pour cause de changement d'emplacement.

A ce propos, j'utilise Xiti pour mieux gérer mon site (voir petite image en bas). Rien ne vous empêche d'ajouter ce genre de choses sur la page. Mais attention à ne pas déplacer les zones par rapport à l'image.