adHoc.71site.fr

→ Une astuce pour concevoir des infobulles personnalisées dans une image qui contient des zones cliquables générées avec le traitement d'image libre et gratuit "GIMP".

Je vous propose une version .html dans un Iframe (téléchargeable avec son image mappée : regionsmetropolitaines.zip) qui pourra être utilisé dans adHoc, ou ailleurs... et il est possible de le tester dans un navigateur sans passer par un CMS quelconque. De plus le code du .html reste toujours très lisible dans notepad++ par exemple.

Il est possible d'intégrer une partie du code directement dans une page d'adHoc.

Son inconvénient majeur est de ne pas être responsive, en effet, les coordonnées des zones cliquables sont fixes... Il faut donc le réserver à une page Web, ou limiter la taille de l'image de base à un affichage sur un écran de faible définition... Mais, sur un mobile, les infobulles n'apparaitront pas au survol, évidemment !

L'origine de cette recherche est une demande d'un utilisateur pour un site d'école.

Cet exemple ci-dessous est appelé dans un Iframe classique. Les liens pour le fonctionnement renvoient vers les sites officiels des régions. L'image de base vient de ce site.

<iframe scrolling="no" src="images/tutoriels/regionsmetropolitaines.html" width="100%" height="700px" frameborder="0"></iframe>

Avant tout, il faut utiliser Gimp (le télécharger et l'installer si ce n'est déjà fait... https://www.gimp.org).

Ensuite il faut avoir travaillé une image pour rendre des zones cliquables : voici une série de tutoriels qui abordent ce sujet, visitez-les et choisissez celui qui vous convient le mieux :

• http://www.01net.com/astuces/creez-et-exportez-une-image-cliquable-371100.html
• http://josar.free.fr/tutoKompozer/miseEnForme6.html
• https://docs.gimp.org/fr/plug-in-imagemap.html
• http://gimp-savvy.com/BOOK/index.html?node81.html

Vous aurez ensuite dans le fichier .map généré par Gimp (... remplacez l'extension .map par .html c'est le même texte mais l'.html s'affiche dans un navigateur et vous pouvez le tester !) quelque chose comme cela :

<img src="regions.png" usemap="#map" width="600" height="632" border="0" />

<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-Denis -->
<area shape="poly" coords="390,70,355,142,356,174,361,174,407,192,445,220,473,193,535,231,536,178,566,148,549,129,498,129,477,108,452,108,414,70,391,70" href="http://www.grandest.fr/">
<area shape="poly" coords="338,173,355,173,406,192,444,220,473,193,535,233,473,298,456,309,430,296,391,319,382,312,392,298,368,276,350,278,336,243,339,173" href="http://www.bourgognefranchecomte.fr/">
<area shape="poly" coords="473,300,489,315,511,292,511,331,530,348,528,378,501,377,507,385,467,420,470,448,416,442,391,421,300,422,299,399,322,373,321,327,307,305,324,296,325,282,350,278,368,276,391,298,380,312,392,319,430,297,456,310,472,300" href="http://www.auvergnerhonealpes.fr/">
<area shape="poly" coords="409,484,428,462,417,443,471,447,469,419,507,386,518,394,518,414,551,450,478,525,435,486,409,485" href="http://www.maregionsud.fr/">
<area shape="poly" coords="563,512,576,513,576,566,561,583,560,622,529,591,529,546,563,512,564,512" href="http://www.isula.corsica/">
<area shape="poly" coords="184,538,190,471,202,471,252,445,251,424,298,400,299,423,390,422,416,443,427,462,408,484,395,484,350,526,351,576,287,575,251,538,184,538" href="http://www.laregion.fr/">
<area shape="poly" coords="184,538,161,538,114,489,162,441,162,299,182,296,165,277,166,262,209,255,244,282,253,303,307,304,322,328,321,373,298,399,250,425,252,444,201,470,190,470,184,537" href="http://www.nouvelle-aquitaine.fr/">
<area shape="poly" coords="209,255,210,231,246,209,241,178,243,149,272,139,292,175,319,185,338,185,335,244,350,278,324,282,323,297,306,305,254,302,245,282,209,255" href="http://www.centre-valdeloire.fr/">
<area shape="poly" coords="97,232,116,211,149,209,162,198,162,162,173,165,202,166,226,179,241,178,245,210,209,231,209,256,166,262,165,278,180,295,161,298,97,233" href="http://www.paysdelaloire.fr/">
<area shape="poly" coords="27,140,26,187,49,209,73,208,97,232,116,210,147,210,163,196,161,162,143,157,104,157,89,140,26,141" href="http://www.bretagne.bzh/">
<area shape="poly" coords="126,92,145,74,180,109,228,109,271,65,283,77,287,113,273,124,272,139,242,149,240,178,226,178,200,165,174,165,142,156,153,155,153,119,126,94" href="http://www.normandie.fr/">
<area shape="poly" coords="283,11,332,11,390,70,355,142,322,119,287,113,284,76,272,66,283,55,282,11" href="http://www.hautsdefrance.fr/">
<area shape="poly" coords="288,113,324,119,355,142,356,172,338,172,338,185,317,185,293,175,273,140,273,124,287,113" href="http://www.iledefrance.fr/">
</map>

Hormis les commentaires, le reste ( la source de l'image [img src... /], les zones cliquables [area ...] ) devra être intégré dans un fichier .html comme le fichier regionsmetropolitaines.html ci-dessous :

Dans la partie [style type="text/css"]...[/style] vous identifierez (id unique pour chaque infobulle) vos zones (area) et les réglez comme vous le souhaitez (largeur fixe ou non)...

Dans le corps de la page [body]...[/body] vous appelez votre image [img .... /] en récupérant la ligne du fichier généré par GIMP puis, pour chaque id d'infobulle, vous rédigez les textes en y ajoutant si nécessaire des balises [b]...[/b] (gras), [i]...[/i] (italique)... [br /] (saut de ligne simple). Voir ici pour une liste de balises utiles par exemple. [u]...[/u] (souligné) semble dépréciée mais fonctionne encore...

Pour les [area ....] vous récupérez les contenus de votre fichier généré par GIMP (dans le code ci-dessus, j'ai ajouté la cible target="_blank" afin que la page s'ouvre dans un nouvel onglet) puis vous ajoutez avant la fermeture de la balise /] les scripts en y écrivant les id de vos infobulles (4 fois pour chaque area), et en aménageant à votre goût x+15 (écart de l'infobulle à droite du curseur : axe horizontal) et y+2 (écart de l'infobulle en bas du curseur : axe vertical).

Il vous suffit d'éditer le fichier .html (que vous pouvez télécharger : regionsmetropolitaines.zip) avec notepad++ par exemple, de le renommer, et d'y apporter vos modifications en faisant attention au chemin de l'image. Ici l'image est au même niveau que le fichier .html.

Si vous utilisez ce fichier .html, veuillez, s'il vous plait, laisser dans le code la référence à mon site. Merci.

Si vous souhaitez intégrer une image mappée sans passer par un fichier .html dans un Iframe, et pour toute question ou aide pour utiliser ce dispositif, veuillez me contacter sur le forum.