**Language / Langue :** **FR** | [[en:yaml:imagemaps|EN]]

====== Image maps / Point & clic (YAML) ======

Les image maps transforment une image en zone interactive. L'auteur fournit deux fichiers :

  * une image visible, affichee au joueur ;
  * un masque PNG, ou chaque couleur plate correspond a une zone.

La fonctionnalite est interactive sur web, desktop et export HTML5 standalone. Sur Discord et terminal, l'image reste affichee comme media/fallback lisible, sans interaction point & clic.

===== Inserer une image map =====

Dans un texte de salle ou dans un encadre HUD :

<code yaml>
texte: "[[#map:scene:https://cyril-fiesta.fr/jdr-bot/scenarios/images/showcase/taverne.png|https://cyril-fiesta.fr/jdr-bot/scenarios/images/showcase/taverne-masque.png]]"
</code>

Format general :

<code>
[[#map:id:image.png|masque.png]]
</code>

  * ''id'' identifie la map dans la salle.
  * ''image.png'' est l'image visible.
  * ''masque.png'' est l'image de masque : chaque couleur pleine represente une zone.

===== Declarer les zones =====

Les zones se declarent dans la salle avec la cle ''zones:'' puis l'id de la map.

<code yaml>
zones:
  scene:
    couleurs:
      - couleur: "#FF0000"
        clic: parler_barman
        highlight: true

      - couleur: "#0000FF"
        clic: examiner_salle
        survol-tooltip: "Regardez attentivement la salle..."
        highlight: true

      - couleur: "#00FF00"
        survol-tooltip: "Une sortie vers la rue."
        survol-event: observer_sortie
</code>

Chaque entree de ''couleurs:'' associe une couleur du masque a une interaction.

===== Options de zone =====

  * ''couleur:'' : couleur HTML du masque, au format ''#RRGGBB''.
  * ''clic:'' : id d'un evenement local declenche au clic.
  * ''survol-tooltip:'' : texte affiche dans une bulle au survol.
  * ''survol-event:'' : id d'un evenement local declenche au survol.
  * ''highlight: true'' : affiche la zone en surbrillance au survol.

===== Evenements associes =====

Les ids references par ''clic:'' ou ''survol-event:'' doivent correspondre a des evenements de la salle.

<code yaml>
evenements:
  - id: parler_barman
    texte: |
      Le barman grommelle :+n+
      **? On commande ou on degage. ?**
    faire: "parle_barman.=.1"

  - id: examiner_salle
    texte: "La salle est basse de plafond et sent la biere eventee."

  - id: observer_sortie
    once: true
    texte: "L'air frais de la rue passe sous la porte."
</code>

Les champs habituels restent disponibles : ''si:'', ''visible-si:'', ''grise-si:'', ''faire:'', ''vers:'', ''texte:'', ''texte-ko:'' et ''once:''. Les zones respectent les conditions portees par l'evenement reference.

===== once: zone =====

''once: zone'' est utile quand une meme couleur du masque contient plusieurs zones separees. Chaque composante peut alors etre declenchee une fois par visite de salle.

<code yaml>
evenements:
  - id: toucher_bouteille
    once: zone
    texte: "Vous inspectez une bouteille vide."
    faire: "bouteilles.+.1"
</code>

===== Dans un HUD =====

Une image map peut rester affichee en permanence dans un encadre :

<code yaml>
encadre:
  - position: haut
    hauteur: 42
    texte: "[[#map:scene:/scenarios/images/taverne.png|/scenarios/images/taverne-masque.png]]"
</code>

Les textes d'evenements apparaissent alors dans le flux principal pendant que la scene reste cliquable.

===== Conseils =====

  * Utiliser un masque PNG sans compression destructrice, avec des aplats nets.
  * Eviter les couleurs trop proches dans le masque.
  * Garder une zone par couleur quand c'est possible ; utiliser ''once: zone'' si une couleur represente plusieurs elements identiques.
  * Prevoir un choix classique de secours si la navigation depend entierement du point & clic.

Voir aussi : [[fr:yaml:tooltips|Tooltips interactifs]], [[fr:yaml:elements-cliquables|Elements cliquables]], [[fr:yaml:hud|HUD]].