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 :

Images en fonction de choix dans listes déroulantes


Sujet :

JavaScript

  1. #1
    Débutant   Avatar de FCL31
    Profil pro
    Inscrit en
    Août 2007
    Messages
    885
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 885
    Points : 267
    Points
    267
    Par défaut Images en fonction de choix dans listes déroulantes
    Salut a tous

    Je sais pas si je poste au bon endroit et si se n'est le cas je m'en excuse d'avance

    Je suis pas très fort en HTML et JavaScript

    Voici mon problème :

    Sur mon site, j'ai une image (d'une voiture)
    et j'ai plusieurs listes déroulante qui vont définir des options sur la voiture (ex : type de toit; type de jante,...)

    Le truc c'est que je voudrais que l'image change en fonction des options choisies

    Mais j'ai aucune idée de comment faire et c'est pourquoi je vous demandes beaucoup d'aide SVP


    PS : Si sa peu aider, j'ai déjà un exemple de liste déroulante en HTML :
    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
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
      <meta content="text/html; charset=ISO-8859-1"
     http-equiv="content-type">
      <title>GLX</title>
    </head>
    <body>
    <br>
    <select class="" style="width: 400px;"
     name="MANUFACTURERS" id="MANUFACTURERS" size="1"
     onchange="onChangeSelectManuf(this);">
    <option value=""> ------- Choisissez une marque ------- </option>
    <option id="MAN_303" value="303">ABARTH</option>
    <option id="MAN_12" value="12">ALFA ROMEO</option>
    <option id="MAN_272" value="272">ALPINA</option>
    <option id="MAN_271" value="271">ALPINE</option>
    <option id="MAN_277" value="277">ARO</option>
    <option id="MAN_278" value="278">ASIA</option>
    <option id="MAN_273" value="273">ASTON MARTIN</option>
    <option id="MAN_21" value="21">AUDI</option>
    <option id="MAN_260" value="260">AUSTIN</option>
    <option id="MAN_23" value="23">AUTOBIANCHI</option>
    <option id="MAN_25" value="25">BEDFORD</option>
    <option id="MAN_280" value="280">BENTLEY</option>
    <option id="MAN_33" value="33">BMW</option>
    <option id="MAN_283" value="283">BUICK</option>
    <option id="MAN_257" value="257">CADILLAC</option>
    <option id="MAN_284" value="284">CATERHAM</option>
    <option id="MAN_46" value="46">CHEVROLET</option>
    <option id="MAN_47" value="47">CHRYSLER</option>
    <option id="MAN_49" value="49">CITRO&Euml;N</option>
    <option id="MAN_54" value="54">DACIA</option>
    <option id="MAN_55" value="55">DAEWOO</option>
    <option id="MAN_56" value="56">DAF</option>
    <option id="MAN_57" value="57">DAIHATSU</option>
    <option id="MAN_261" value="261">DAIMLER</option>
    <option id="MAN_256" value="256">DODGE</option>
    <option id="MAN_286" value="286">F.S.O. / POLSKI</option>
    <option id="MAN_264" value="264">FERRARI</option>
    <option id="MAN_76" value="76">FIAT</option>
    <option id="MAN_77" value="77">FORD</option>
    <option id="MAN_269" value="269">FORD USA</option>
    <option id="MAN_92" value="92">G.M.E.</option>
    <option id="MAN_84" value="84">GALLOPER</option>
    <option id="MAN_98" value="98">HONDA</option>
    <option id="MAN_100" value="100">HYUNDAI</option>
    <option id="MAN_302" value="302">INFINITI</option>
    <option id="MAN_103" value="103">INNOCENTI</option>
    <option id="MAN_105" value="105">ISUZU</option>
    <option id="MAN_108" value="108">JAGUAR</option>
    <option id="MAN_109" value="109">JEEP</option>
    <option id="MAN_114" value="114">KIA</option>
    <option id="MAN_119" value="119">LADA</option>
    <option id="MAN_265" value="265">LAMBORGHINI</option>
    <option id="MAN_120" value="120">LANCIA</option>
    <option id="MAN_121" value="121">LAND ROVER</option>
    <option id="MAN_123" value="123">LDV</option>
    <option id="MAN_124" value="124">LEXUS</option>
    <option id="MAN_125" value="125">LEYLAND</option>
    <option id="MAN_274" value="274">LIGIER</option>
    <option id="MAN_270" value="270">LOTUS</option>
    <option id="MAN_288" value="288">MAHINDRA</option>
    <option id="MAN_136" value="136">MARUTI</option>
    <option id="MAN_267" value="267">MASERATI</option>
    <option id="MAN_255" value="255">MAYBACH</option>
    <option id="MAN_137" value="137">MAZDA</option>
    <option id="MAN_140" value="140">MERCEDES-BENZ</option>
    <option id="MAN_259" value="259">MG</option>
    <option id="MAN_141" value="141">MINI</option>
    <option id="MAN_142" value="142">MITSUBISHI</option>
    <option id="MAN_289" value="289">MORGAN</option>
    <option id="MAN_262" value="262">MORRIS</option>
    <option id="MAN_158" value="158">NISSAN</option>
    <option id="MAN_163" value="163">OPEL</option>
    <option id="MAN_168" value="168">PEUGEOT</option>
    <option id="MAN_292" value="292">PIAGGIO</option>
    <option id="MAN_268" value="268">PONTIAC</option>
    <option id="MAN_170" value="170">PORSCHE</option>
    <option id="MAN_172" value="172">PROTON</option>
    <option id="MAN_293" value="293">RELIANT</option>
    <option id="MAN_178" value="178">RENAULT</option>
    <option id="MAN_266" value="266">ROLLS-ROYCE</option>
    <option id="MAN_179" value="179">ROVER</option>
    <option id="MAN_181" value="181">SAAB</option>
    <option id="MAN_187" value="187">SANTANA</option>
    <option id="MAN_192" value="192">SEAT</option>
    <option id="MAN_200" value="200">SKODA</option>
    <option id="MAN_138" value="138">SMART</option>
    <option id="MAN_204" value="204">SSANGYONG</option>
    <option id="MAN_206" value="206">SUBARU</option>
    <option id="MAN_208" value="208">SUZUKI</option>
    <option id="MAN_210" value="210">TALBOT</option>
    <option id="MAN_294" value="294">TATA</option>
    <option id="MAN_220" value="220">TOYOTA</option>
    <option id="MAN_263" value="263">TRIUMPH</option>
    <option id="MAN_297" value="297">TVR</option>
    <option id="MAN_226" value="226">VAUXHALL</option>
    <option id="MAN_230" value="230">VOLKSWAGEN</option>
    <option id="MAN_231" value="231">VOLVO</option>
    <option id="MAN_299" value="299">WARTBURG</option>
    <option id="MAN_300" value="300">YUGO/ZASTAVA</option>
    <option id="MAN_301" value="301">ZAZ TAVRIA</option>
    </select>
    </body>
    </html>

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    a mon avis l'id sur l'option ne sert pas à grand chose ...

    sur le onchange de ton select utilise le value ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onchange="alert(this.value)"
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Débutant   Avatar de FCL31
    Profil pro
    Inscrit en
    Août 2007
    Messages
    885
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France

    Informations forums :
    Inscription : Août 2007
    Messages : 885
    Points : 267
    Points
    267
    Par défaut
    Tu peu pas expliquer un peu plus STP j'y connais pas grand chose

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    dans ta balise select , sur le onchange, modifie le src de la balise image sur la page
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onchange="document.getElementById('monimage').src='images/photo+'this.value+'.jpg'"
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Réponses: 23
    Dernier message: 04/04/2014, 20h46
  2. Cacher lignes en fonction choix dans liste déroulante
    Par Craquotte dans le forum Excel
    Réponses: 4
    Dernier message: 27/02/2013, 21h08
  3. Images en fonction de choix dans liste déroulantes
    Par FCL31 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 02/03/2010, 16h08
  4. Réponses: 1
    Dernier message: 21/08/2008, 11h35
  5. Réponses: 2
    Dernier message: 25/11/2005, 12h09

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