Ou comment créer une image cliquable facilement ...

• on va d’abord créer notre image cliquable avec GIMP en suivant ce tutoriel

https://memo-linux.com/the-gimp-creer-une-zone-cliquable-sur-une-image-en-html/

ce qui nous produit un fichier .map

• on va ensuite téléverser l’image qui nous a servi de base dans le dossier /squelettes/images par exemple (dossier à créer si inexistant)

• on va ensuite ouvrir le fichier .map obtenu pour changer l’url de l’image, c’est à dire que dans la première ligne du fichier .map obtenu qui ressemble à ça

  <img src="[nom_image] (exportée)" width="500" height="106" border="0" usemap="#map" /

  on va remplacer [nom_image] (exportée) par l’adresse de l’image. Dans notre exemple si l’image s’appelle image.png et se trouve donc dans /squelettes/images, ça donne
  URL_du_site/squelettes/images/image.png

• on va maintenant copier tout le code du fichier .map modifié dans un fichier image_cliquable.html (par exemple) que l’on dépose dans /squelettes/modeles

• enfin, dans un article on met ce code
  <image_cliquable|>

• et on admire le fruit de notre travail 😎

Code dans le modèle pour cette image cliquable :

<img src="https://escal.edu.ac-lyon.fr/spip/squelettes/images/bandeau/bandeau_DANE.png" width="500" height="106" 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:Jean-Christophe Villeneuve -->
<area shape="rect" coords="1,5,330,106"  title="Le site de la DANE de Lyon" href="https://dane.ac-lyon.fr/spip/" target="_blank" />
<area shape="rect" coords="373,4,499,48"  title="Le site de l'Académie de Lyon" href="https://www.education.gouv.fr/" target="_blank" />
<area shape="rect" coords="386,48,499,106" title="Le site de l'Education Nationale" href="https://www.ac-lyon.fr/" target="_blank" />
</map>