IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Par défaut 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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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.

  3. #3
    Membre confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Par défaut
    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

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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;

  5. #5
    Membre confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Par défaut
    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.?

  6. #6
    Membre confirmé
    Homme Profil pro
    Enseignant
    Inscrit en
    Septembre 2018
    Messages
    166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Pyrénées Orientales (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2018
    Messages : 166
    Par défaut
    A moins qu'il faille utiliser ceci?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 6
    Dernier message: 12/02/2017, 13h17
  2. [AC-2016] faire poper une images dans un formulaire en fonction d'une pièce jointe
    Par Chyropterian dans le forum Access
    Réponses: 2
    Dernier message: 17/05/2016, 17h33
  3. [AC-2007] Afficher des images dans un état en fonction d'un champ
    Par Gostringer dans le forum IHM
    Réponses: 13
    Dernier message: 20/05/2014, 13h43
  4. Réponses: 0
    Dernier message: 18/02/2008, 22h05
  5. [C#] Afficher des images dans un datagrid
    Par mbibim63 dans le forum Windows Forms
    Réponses: 3
    Dernier message: 11/05/2005, 12h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo