{"id":31,"date":"2025-01-22T11:57:07","date_gmt":"2025-01-22T10:57:07","guid":{"rendered":"https:\/\/eleves.escl.fr\/wp2\/?page_id=31"},"modified":"2026-03-17T14:15:47","modified_gmt":"2026-03-17T13:15:47","slug":"image-map-comment-ca-marche","status":"publish","type":"page","link":"https:\/\/eleves.escl.fr\/wp2\/image-map-comment-ca-marche\/","title":{"rendered":"Image Map : comment \u00e7a marche ?"},"content":{"rendered":"\n

Sous Gimp, on ouvre l’image et s\u00e9lectionne Filtres <\/strong>puis Web <\/strong>puis Image Cliquable Web<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

On cr\u00e9e ensuite toutes les zones cliquables dans l’image:<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

Une fois toutes les zones cr\u00e9\u00e9es, on r\u00e9cup\u00e8re le code HTML avec Affichage <\/strong>puis Source<\/strong>, ou bien on peut r\u00e9cup\u00e9rer le source du fichier .map<\/strong> qui est cr\u00e9\u00e9 avec l’outil.<\/p>\n\n\n\n

On choisit un bloc HTML personnalis\u00e9 dans lequel on colle le code HTML produit par Gimp<\/p>\n\n\n\n

<img src=\"[IMG_2226] (import\u00e9e)\" width=\"1828\" height=\"1828\" border=\"0\" usemap=\"#map\" \/>\n\n<map name=\"map\">\n<!-- #$-:Image map file created by GIMP Image Map plug-in -->\n<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->\n<!-- #$-:Please do not edit lines starting with \"#$\" -->\n<!-- #$VERSION:2.3 -->\n<!-- #$AUTHOR:A. Noblet  -->\n<area shape=\"circle\" coords=\"233,887,138\" href=\"http:\/\/eleves.escl.fr\/wp2\/description-de-limage\/#avion\" \/>\n<area shape=\"circle\" coords=\"760,1461,27\" href=\"http:\/\/eleves.escl.fr\/wp2\/description-de-limage\/#hirondelle\" \/>\n<area shape=\"rect\" coords=\"1161,1293,1554,1440\" href=\"http:\/\/eleves.escl.fr\/wp2\/description-de-limage\/#paras\" \/>\n<\/map>\n<\/code><\/pre>\n\n\n\n
On vient ensuite modifier le src <\/strong>de img <\/strong>pour mettre le bon URL de l’image : https:\/\/eleves.escl.fr\/wp2\/wp-content\/uploads\/2025\/01\/IMG_2226.jpg<\/strong><\/a><\/p>\n\n\n\n
Et on ajoute le script du d\u00e9but, en gras, ainsi que le class=\u00a0\u00bbmap\u00a0\u00bb :<\/p>\n\n\n\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/maphilight\/1.4.0\/jquery.maphilight.min.js\"><\/script>\n<script type=\"text\/javascript\">\n$(function() {\n$('.map').maphilight();\n});\n<\/script><\/strong>\n\n\n<img src=\"https:\/\/eleves.escl.fr\/wp2\/wp-content\/uploads\/2025\/01\/IMG_2226.jpg<\/strong>\" width=\"1828\" height=\"1828\" border=\"0\" usemap=\"#map\"  class=\"map\"<\/strong>\/>\n\n<map name=\"map\">\n<!-- #$-:Image map file created by GIMP Image Map plug-in -->\n<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->\n<!-- #$-:Please do not edit lines starting with \"#$\" -->\n<!-- #$VERSION:2.3 -->\n<!-- #$AUTHOR:A. Noblet  -->\n<area shape=\"circle\" coords=\"233,887,138\" href=\"http:\/\/eleves.escl.fr\/wp2\/description-de-limage\/#avion\" \/>\n<area shape=\"circle\" coords=\"760,1461,27\" href=\"http:\/\/eleves.escl.fr\/wp2\/description-de-limage\/#hirondelle\" \/>\n<area shape=\"rect\" coords=\"1161,1293,1554,1440\" href=\"http:\/\/eleves.escl.fr\/wp2\/description-de-limage\/#paras\" \/>\n<\/map>\n<\/code><\/pre>\n\n\n\n
Ce qui donne : <\/p>\n\n\n\n