Logiciel infobulles

Bonjour,

Il faudrait clarifier ton cas d'usage. En outre :

• Comment définit-on les zones cliquables ? Comment est défini le texte correspondant et que tu prévois d'afficher dans des infobulles ?
• Est-ce que le texte dépend-il de l'image considérée ?
• Quelles sont tes connaissances en programmations ?

Dans l'absolu, on peut imaginer un programme qui affiche une image et dont l'interface réagit selon la zone sur laquelle tu cliques. Cet exemple génère dans un canevas des carrés rouges positionnés aléatoirement et les fait disparaître quand on clique dessus.

Bonne chance

En fait, j'ai fait le plan de mon jardin avec les arbustes et je voudrais qu'une popup s'ouvre avec le nom de l'arbre quand je clique dessus.

Dans un premier temps, pour tester,(avec Inkscape) j'ai fait un pdf en mettant simplement un lien qui renvoie sur un site internet avec le descriptif de l'arbre quand je clique dessus, mais c'est un peu trop de renseignements, je n'ai pas besoin du descriptif complet de l'arbre. Seul le nom de l'arbre dans une infobulle me suffirais.

Bonjour,

La solution techniquement faisable que je vois serait d'adjoindre un fichier HTML, qui charge ton image, et qui contient du code javascript permettant d'être réactif aux clics. L'avantage serait qu'ensuite, tu n'aurais besoin que de ton navigateur pour avoir une image qui se comporte comme tu le souhaites.

Et c'est exactement la solution préconisée ici. Cependant la solution donnée est partielle car les calques (<div>...</div>) ne sont pas définis par rapport l'image, mais à côté.

Cependant, ce message renvoie sur la notion d'image map (<area>...</area>) présenté ici (bon j'en ai profité depuis pour compléter ce fil de discussion :p). L'idée, c'est que chaque zone est définie par un polygone, lui même défini par une séquence coordonnées exprimées en pixels. On peut définir un nombre arbitraire de polygone, et attacher une action (par exemple afficher un message). On peut attacher à chaque zone :

• shape: le type de la zone (rectangle, cercle, polygone)
• title: texte de l'infobulle
• target: le comportement du navigateur quand on clique. Généralement on veut "blank_".
• alt: le texte à afficher pendant le chargement
• href: une URL (par exemple dans ton cas, ce pourrait être la page wikipedia qui présente la plante délimitée). La valeur "#" permet de rendre le lien inactif.

La seule difficulté restante, c'est trouver un moyen pratique permettant de générer ces séquences étant donnée une image. Or maintenant qu'on a la solution technique (le mot magique, c'est image map), donc pour trouver l'outil adéquat, n cherche sur son moteur de recherche favori quelque chose comme "make html image area map").

Et là, on trouve exactement ce que tu veux : https://www.image-map.net/ Comme tu peux le voir, ce site permet de charger une image. Il faut ensuite définir une ou plusieurs zones, chacune étant définie soit par un cercle, soit par un rectangle, soit par un polygone. L'interface est relativement intuitive, il suffit d'ajouter une nouvelle zone et de cliquer sur l'image pour définir les points caractéristiques de la forme choisie.

Une fois que tout est prêt, il suffit de cliquer sur le bouton vert, et on obtient le code à copier coller dans le fichier HTML.

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://i.imgur.com/ZY0gdtF.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Nuage" title="Nuage" href="https://fr.wikipedia.org/wiki/Nuage" coords="0,0,485,202" shape="rect">
    <area target="_blank" alt="Arbre" title="Arbre" href="https://fr.wikipedia.org/wiki/Arbre" coords="150,334,125,435,172,506,276,570,363,571,423,518,483,470,506,412,485,343,438,281,333,241,233,237" shape="poly">
</map>

Il suffit à présent d'ouvrir ce fichier avec son navigateur. Tu peux vérifier que les zones définies affichent bien l'infobulle (au bout d'une ou deux secondes) et sont cliquables et t'envoie bien sur les pages wikipedia que j'ai définies.

Bonne chance