Il faut utiliser le logiciel libre et gratuit Gimp.
Le lancer et ouvrir l’image. Si besoin adapter ses dimensions à son utilisation future. Filtres —> Web —> Image cliquable
Une nouvelle fenêtre s’ouvre
À l’aide de la souris, délimiter la première zone en choisissant sur la gauche l’outil Rectangle, cercle ou polygonal. Double-cliquer pour valider le tracé. Un panneau nouveau s’ouvre.
Il faut indiquer le type de lien (le plus souvent, site web), l’adresse de la page (le copier coller semble ne pas fonctionner), la cible (_blank va ouvrir le lien dans un nouvel onglet ou une nouvelle page selon le paramétrage du navigateur de celui qui clique) et le texte alternatif optionnel. Valider par « Apply » puis « OK »
Recommencer pour la deuxième zone la même opération.
On observe dans la colonne de droite le résumé de tous les éléments que l’on vient de créer. On peut insérer autant de zones que l’on veut.
Si l’on sélectionne une ou plusieurs zones, elles sont matérialisées sur l’image par un contour rouge.
Il faut maintenant cliquer sur « Fichier » —> « Enregistrer sous »
Ne pas forcément modifier le nom par défaut et choisir l’endroit de l’enregistrement.
Nous constatons la présence d’un nouveau fichier avec l’extension « .map »
[Nom de l’image] (importée).map Nous allons l’ouvrir avec une application basique pour texte (TextEdit – Mac ou SimpleTexte – PC). Les traitements de texte plus élaborés introduisent des balises invisibles qui vont nous gêner pour la suite
<img src= »[Fotolia_663417_L] (importée) » width= »550″ height= »371″ border= »0″ usemap= »#map » />
<map name= »map »>
<!– #$-:Image map file created by GIMP Image Map plug-in –>
<!– #$-:GIMP Image Map plug-in by Maurits Rijk –>
<!– #$-:Please do not edit lines starting with « #$ » –>
<!– #$VERSION:2.3 –>
<!– #$AUTHOR:Prénom NOM –>
<area shape= »poly » coords= »108,255,90,237,85,231,130,210,170,189,167,212,157,234,154,245,121,257″ alt= »États-Unis » target= »_blank » href= »http://fr.wikipedia.org/États-Unis » />
<area shape= »circle » coords= »238,166,11″ alt= »Angleterre » target= »_blank » href= »http://fr.wikipedia.org/Angleterre » />
</map>
Il faut maintenant ouvrir son navigateur et la page dans laquelle on va installer l’image cliquable.
Se rendre sur la page ou l’article où sera installé l’image. Installer comme d’habitude l’image par le menu « Ajouter un média » Passer en mode « Texte » (et non pas « Visuel ») et coller le code du fichier .map débarrassé de tous ses commentaires. (ce qui commence par <- -! et fini par – ->
Il faut maintenant remplacer l’adresse de l’image cliquable « [Fotolia_663417_L] (importée) » par celle qui figure dans l’image importée « http://www.pommedepain.org/4/wp-content/uploads/2015/03/Fotolia_663417_L.jpg » dans notre cas. Le résultat…
Si l’on clique sur l’onglet « Visuel » il y a deux images… Il faut donc maintenant supprimer la première et ne garder que celle qui est cliquable.
Publier ou mettre à jour l’article ou la page et l’ouvrir dans un navigateur ; on constate en passant la souris sur les zones cliquables que tout fonctionne parfaitement.
