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 :

liste déroulante qui affiche des images 2


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Webdesigner Intégrateur web
    Inscrit en
    Mars 2008
    Messages
    95
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Webdesigner Intégrateur web

    Informations forums :
    Inscription : Mars 2008
    Messages : 95
    Par défaut liste déroulante qui affiche des images 2
    Bonjour,

    j'ai poster un message sur le forum pour pouvoir trouver script java script, qui me permet de mettre dans mon formulaire une liste déroulante avec des rubriques qui me permet d'afficher une image quand je clique sur la rubrique, jusque la tout fonctionne, sauf que j'ai d'autre liste déroulante dans le même formulaire qui doivent faire la même chose, mais j'ai essayé de repéter le script et la, la premier liste déroulante ne fonctionne plus au niveau affichage d'image, et la deuxième liste déroulante fonctionne, je suis débutant en java script, je pense que de mettre deux fois le script doit faire un conflit ???
    Car j'ai besoin de ce script pour quatre liste déroulante différente et qui les affiche les images sous les liste déroulante correspondante.

    voila le code pour une liste déroulante :

    comment je dois faire pour l'utiliser pour d'autre liste déroulante sans conflit

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
     
    var tbvaleur= new Array('fg','images/image1.jpg','fh','images/image2.jpg','fi','images/image3.jpg','fj','images/image4.jpg');
     
    function change(vaval){
    for (var i = 0; i < tbvaleur.length; i+=2) {
    if (tbvaleur[i]==vaval){
    document.getElementById('coucou').src=tbvaleur[i+1];
    }
    }
    }
    </script>
    </head>
    <body>
     
    <select onChange=" change(this.value)">
    <option value="">Choisissez ! 
    </option>
    <option value="fg">image1</option>
    <option value="fh">image2</option>
    <option value="fi">image3</option>
    <option value="fj">image4</option>
    </select> 
     
    <img id ='coucou' src ='d4g.jpg'>
    <br>
    </body>
    </html>

    je vous remercie de votre aide

  2. #2
    Membre Expert
    Avatar de Loceka
    Profil pro
    Inscrit en
    Mars 2004
    Messages
    2 276
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2004
    Messages : 2 276
    Par défaut
    Tu peux poster le code que tu fais quand tu mets les 2 listes ?

    Sinon ton code peut être grandement simplifié en utilisant un tableau associatif :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var tbvaleur= {
      'fg' : 'images/image1.jpg',
      'fh' : 'images/image2.jpg',
      'fi' : 'images/image3.jpg',
      'fj' : 'images/image4.jpg'
    };
     
    function change(vaval){
      document.getElementById('coucou').src=tbvaleur[vaval];
    }

  3. #3
    Membre confirmé
    Homme Profil pro
    Webdesigner Intégrateur web
    Inscrit en
    Mars 2008
    Messages
    95
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Webdesigner Intégrateur web

    Informations forums :
    Inscription : Mars 2008
    Messages : 95
    Par défaut
    Citation Envoyé par Loceka Voir le message
    Tu peux poster le code que tu fais quand tu mets les 2 listes ?

    Sinon ton code peut être grandement simplifié en utilisant un tableau associatif :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var tbvaleur= {
      'fg' : 'images/image1.jpg',
      'fh' : 'images/image2.jpg',
      'fi' : 'images/image3.jpg',
      'fj' : 'images/image4.jpg'
    };
     
    function change(vaval){
      document.getElementById('coucou').src=tbvaleur[vaval];
    }
    Loceka, en faites comme je suis débutant je pensais quand répétant le script ca marché, mais non ca rentre en conflit peux tu me dire comment faire pour que ca fonction pareil pour 4 liste déroulante différentes

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    je pense que de mettre deux fois le script doit faire un conflit ???
    il ne rentre pas en conflit mais si tu ne changes pas l'élément auquel tu veux appliquer la modification cela sera toujours le même qui sera modifié
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function change(vaval){
      for (var i = 0; i < tbvaleur.length; i+=2) {
        if (tbvaleur[i]==vaval){
          document.getElementById('coucou').src=tbvaleur[i+1];
        }
      }
    }
    dans ton code ce sera toujours
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('coucou')
    qui sera modifié, il faut passer à ta fonction la référence à l'objet, en reprenant le code de Loceka cela donne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function change(vaval, id_destination){
      document.getElementById( id_destination).src = tbvaleur[vaval];
    }

  5. #5
    Membre Expert
    Avatar de Loceka
    Profil pro
    Inscrit en
    Mars 2004
    Messages
    2 276
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2004
    Messages : 2 276
    Par défaut
    Le plus simple serait quand même que tu postes le code que tu as essayé de faire pour qu'on te dise où ça ne va pas et comment le corriger.

  6. #6
    Invité
    Invité(e)
    Par défaut
    en considerant que chaque select a sa propre zone d'affichage il faut mettre un parametre suplementaire qui correspondra a l'id de la zone ou se trouve l'image

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
    var tbvaleur= {
      'fg' : 'images/image1.jpg',
      'fh' : 'images/image2.jpg',
      'fi' : 'images/image3.jpg',
      'fj' : 'images/image4.jpg'
    };
     
    function change(vaval,element){
      document.getElementById(element).src=tbvaleur[vaval];
    }
    </script>
    </head>
    <body>
     
    <select onChange=" change(this.value,'coucou1')">
    <option value="">Choisissez ! 
    </option>
    <option value="fg">image1</option>
    <option value="fh">image2</option>
    </select> 
     
    <img id ='coucou1' src ='d4g.jpg'>
    <br>
    
    <select onChange=" change(this.value,'coucou2')">
    <option value="">Choisissez ! 
    </option>
    <option value="fi">image1</option>
    <option value="fj">image2</option>
    </select> 
     
    <img id ='coucou2' src ='d4g.jpg'>
    <br>
    </body>
    </html>
    Dernière modification par Invité ; 17/02/2011 à 19h58.

Discussions similaires

  1. Choix dans une liste déroulante qui affiche la div correspondante
    Par Mr Quinou dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 11/11/2014, 09h20
  2. [PHP 5.3] Liste déroulante qui affiche le résultat de la recherche
    Par Marc31 dans le forum Langage
    Réponses: 6
    Dernier message: 25/06/2014, 14h52
  3. Liste déroulante qui affiche une image
    Par Invité dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 10/04/2014, 08h52
  4. [XL-2007] liste déroulante qui a des liens hypertextes
    Par nicolela dans le forum Excel
    Réponses: 4
    Dernier message: 19/01/2014, 19h03
  5. Réponses: 8
    Dernier message: 15/09/2009, 14h12

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