Discussion :

[bahh66]

Je travaille en ce moment sur ce code.

J'aimerai que lorsque la réponse est correcte une image s'affiche dans le dialog. (Jusque là, je pense que je peux y arriver).

Ma difficulté réside dans le fait que je souhaiterais que l'image soit (potentiellement) différente pour chaque area que je définirai.

Du coup je me demande à quel endroit je dois paramétrer les sources de mes images. Dans les définitions des area?

Et comment noter dans le html du dialog qu'il doit afficher l'image dépendant du data-id?

Merci par avance des réponses.

[NoSmoking]

Bonjour,
tu as toutes les billes pour y arriver

Du coup je me demande à quel endroit je dois paramétrer les sources de mes images. Dans les définitions des area?

oui au même titre que tu mets l'id de la zone via un data-id="jaune" tu peux mettre le nom de ton image via un data-img="img-jaune" par exemple.

Pour la lecture même principe que ce qui est déjà en place :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const reponse = area.dataset.id;
const srcImage = area.dataset.img;

Il te suffit ensuite de faire suivre ces paramètres de fonction en fonction.

[bahh66]

Alors, j'ai essayé quelque chose mais ça ne fonctionne pas.

tu peux mettre le nom de ton image via un data-img="img-jaune" par exemple.

alors, j'ai pas vraiment réussi à le mettre dans la map, je ne sais pas comment définir l'url avec ça.

Du coup, je l'ai mis ailleurs dans le html.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img class="img-reponse" src="https://upload.wikimedia.org/wikipedia/commons/7/74/Emblem-favorites.svg" data-img="img-bleu">
 
<img class="img-reponse" src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Broken_heart.svg" data-img="img-jaune">

J'ai mis ça dans le css, pour évite que ça ne se voit au début.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.img-reponse {
  display : none ;
}

et dans le script, au niveau de la fonction traiteValeur:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
const imgreponse = document.getElementByClassName("img-reponse");
     // le test
  if (reponse === nomJeu) {
    // bingo gagné !
    imgreponse.style.display = "initial";
 
...
 
 
    const msg = "<b>" + nomJeu + "</b> est une bonne réponse !"+imgreponse;

Pour que l'image s'affiche dans le dialog

[NoSmoking]

Visiblement tu n'as pas compris la démarche.

Il faut traiter l'URL de l'image comme tu traites les ID, à savoir :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<map name="testmap" id="zones_image">
  <area 
    data-id="bleu"
    data-img="https://upload.wikimedia.org/wikipedia/commons/7/74/Emblem-favorites.svg"
    shape="rect" coords="570,195,660,275"/>
  <area
    data-id="jaune"
    data-img="https://upload.wikimedia.org/wikipedia/commons/b/bb/Broken_heart.svg"
    shape="poly" coords="1027,266,1031,268,1034,271,1035,274,1033,279,1029,282,1021,282,1016,278,1017,271,1023,265,1024,261,1027,266"/>
</map>

c'est à cela que correspond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const srcImage = area.dataset.img;

[bahh66]

Visiblement tu n'as pas compris la démarche.

Je pense que si mais je n'y arrive pas.

J'avais mis le data-img mais mon problème c'est l'affichage.

Mon srcImage contient le lien mais après je ne sais pas quoi en faire pour qu'il arrive dans la boite de dialogue.

Je me suis dit qu'il fallait faire quelque chose de similaire à ce qui est là :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const elCircle = document.createElement("DIV");
  elCircle.classList.add("img-point");
  elCircle.style.left = left + "px"; // il faut ajouter l'unité pour l'utiliser avec style
  elCircle.style.top = top + "px";
  // et enfin ajout au parent prévu
  elementDestination.append(elCircle);

quand on a fait afficher un point mais je ne vois pas à que élément le renvoyer.?

[bahh66]

A moins qu'il faille utiliser ceci?