Afficher différentes images dans un dialog en fonction d'une area

Version imprimable

17/11/2022, 22h43
bahh66

Afficher différentes images dans un dialog en fonction d'une area

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.
18/11/2022, 18h27
NoSmoking
Bonjour,
tu as toutes les billes pour y arriver ;)

Citation:

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:

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.

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

Citation:

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:

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:

1 2 3 .img-reponse { display : none ; }
et dans le script, au niveau de la fonction traiteValeur:
Code:

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 = "" + nomJeu + " est une bonne réponse !"+imgreponse;
Pour que l'image s'affiche dans le dialog

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

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

Code:

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:

const srcImage = area.dataset.img;

Citation:

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:

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.?

21/11/2022, 11h59
bahh66

A moins qu'il faille utiliser ceci?

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:

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:

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.

21/11/2022, 13h40
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.
21/11/2022, 17h08
NoSmoking
Citation:

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

Plusieurs écritures sont possibles :

• alternance double simple quote

Code:

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

• alternance simple double quote

Code:

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

• échappement des doubles quote et inversement

Code:

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

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

Code:

const msg = `<img src="${srcImage}"> ${nomJeu} 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