Sous Gimp, on ouvre l’image et sélectionne Filtres puis Web puis Image Cliquable Web
On crée ensuite toutes les zones cliquables dans l’image:
Une fois toutes les zones créées, on récupère le code HTML avec Affichage puis Source, ou bien on peut récupérer le source du fichier .map qui est créé avec l’outil.
On choisit un bloc HTML personnalisé dans lequel on colle le code HTML produit par Gimp
<img src="[IMG_2226] (importée)" width="1828" height="1828" 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:A. Noblet -->
<area shape="circle" coords="233,887,138" href="http://eleves.escl.fr/wp2/description-de-limage/#avion" />
<area shape="circle" coords="760,1461,27" href="http://eleves.escl.fr/wp2/description-de-limage/#hirondelle" />
<area shape="rect" coords="1161,1293,1554,1440" href="http://eleves.escl.fr/wp2/description-de-limage/#paras" />
</map>
On vient ensuite modifier le src de img pour mettre le bon URL de l’image : https://eleves.escl.fr/wp2/wp-content/uploads/2025/01/IMG_2226.jpg
Et on ajoute le script du début :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(function() {
$('.map').maphilight();
});
</script>
<img src="https://eleves.escl.fr/wp2/wp-content/uploads/2025/01/IMG_2226.jpg" width="1828" height="1828" 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:A. Noblet -->
<area shape="circle" coords="233,887,138" href="http://eleves.escl.fr/wp2/description-de-limage/#avion" />
<area shape="circle" coords="760,1461,27" href="http://eleves.escl.fr/wp2/description-de-limage/#hirondelle" />
<area shape="rect" coords="1161,1293,1554,1440" href="http://eleves.escl.fr/wp2/description-de-limage/#paras" />
</map>
Ce qui donne :
