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?

[NoSmoking]

Pourquoi tu te compliques la vie, tu l’intègres en tant que HTML dans ta DIALOG via le title ou le msg.

Ce bout de code

Code :

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

1
2
3
4
// affichage message
const title = "<span class='bingo'>BRAVO</span>";  // stylé directement en CSS
const msg = "<b>" + nomJeu + "</b> est une bonne réponse !";
showModal(title, msg);

est à remplacer par

Code :

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

1
2
3
4
// affichage message
const title = "<span class='bingo'>BRAVO</span>"; // stylé directement en CSS
const msg = "<img src='" + srcImage + "'><br><b>" + nomJeu + "</b> est une bonne réponse !";
showModal(title, msg);

par exemple.

[bahh66]

En fait c'est l'écriture que j'ai pas (entre autre).

Je ne comprends pas pourquoi on met '" .... "'.

Les doubles guillemets ne me sont pas du tout intuitifs, j'en aurai mis qu'un.

Merci en tout cas.

[NoSmoking]

Je ne comprends pas pourquoi on met '" .... "'.

Plusieurs écritures sont possibles :

• alternance double simple quote

Code :

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

const msg = "<img src='" + srcImage + "'><br><b>" + nomJeu + "</b> est une bonne réponse !";

• alternance simple double quote

Code :

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

const msg = '<img src="' + srcImage + '"><br><b>' + nomJeu + '</b> est une bonne réponse !';

• échappement des doubles quote et inversement

Code :

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

const msg = "<img src=\"" + srcImage + "\"><br><b>" + nomJeu + "</b> est une bonne réponse !";

• « template strings » début et fin de chaîne avec l'accent grave

Code :

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

const msg = `<img src="${srcImage}"><br><b>${nomJeu}</b> est une bonne réponse !`;

Le mieux étant souvent de s'en tenir à une forme pour plus de cohérence dans ton code même si la « template string » peut s’avérer plus lisible dans pas mal de cas.

A lire :

• Littéraux de gabarits sur MDN

ou encore

• Les chaînes sur javascript.info