Kontaktformular mit Bilder bei Auswahl

    Hallo,
    ich bau hier gerade ein Kontaktformular für Produkt Anfragen. In diesen Formular kann der User dann zb. Beispiel ein Produkt wählen und direkt darunter die Farbe.
    Es sollen aber ein kleines Bild angezeigt werden wenn er ein Produkt wählt, und wenn er die Farbe wählt, soll da auch wieder ein Bild erscheinen.
    Ich bekomm es ja hin das eine Auswahl funktioniert, wählt er aber dann die Farbe, verschwindet das obere Produkt Bild wieder.

    Kann mir bitte jemand weiterhelfen?

    Hier mein Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    var stat = false;
    function form_auswahl(id) {
    if (stat) document.getElementById(stat).style.display = "none";
    document.getElementById(id).style.display = "";
    stat = id;
    }
    </script>
    <Form>
    <div class="align">Produkt</div>
    <select class="select" name="produkt" onchange="form_auswahl(this[this.selectedIndex].value)">
    <option value="">Bitte wählen</option>
    <option value="Produkt 1">Produkt 1</option>
    <option value="Produkt 2">Produkt 2</option>
    <option value="Produkt 3">Produkt 3</option>
    <option value="Produkt 4">Produkt 4</option>
    <option value="Produkt 5">Produkt 5</option>
    </select>
    <div>
    <span style="display:none" id="Produkt 1"><img src="produkt1.jpg"></span>
    <span style="display:none" id="Produkt 2"><img src="produkt2.jpg"></span>
    <span style="display:none" id="Produkt 3"><img src="produkt3.jpg"></span>
    <span style="display:none" id="Produkt 4"><img src="produkt4.jpg"></span>
    <span style="display:none" id="Produkt 5"><img src="produkt5.jpg"></span>
    </div>

    <div class="align">Farbe</div>
    <select class="select" name="farbe" onchange="form_auswahl(this[this.selectedIndex].value)">
    <option value="">Bitte wählen</option>
    <option value="Gelb">Gelb</option>
    <option value="Rot">Rot</option>
    <option value="Schwarz">Schwarz</option>
    <option value="Grün">Grün</option>
    <option value="Orange">Orange</option>
    </select>
    <div>
    <span style="display:none" id="Gelb"><img src="gelb.jpg"></span>
    <span style="display:none" id="Rot"><img src="rot.jpg"></span>
    <span style="display:none" id="Schwarz"><img src="schwarz.jpg"></span>
    <span style="display:none" id="Grün"><img src="gruen.jpg"></span>
    <span style="display:none" id="Orange"><img src="orange.jpg"></span>
    </div>
    </Form>

    ach und noch was.. ich würd mit javascript-objekten werkeln und der thread gehört eigentlich ins javascript- und php-forum ;)
    für die vorgehensweise: objekt erzeugen, die eigenschaften und das dazugehörige bild im objekt hinterlegen.

    dann beim ändern der dropdowns prüfen mit welchen objekten der wert übereinstimmt
    (wahrsch3inlich mit ner for-schleife am besten oder ggf for in)

    dann wenn du das objekt hast, wo alle bedingungen stimmen liest du das bild aus und stopfst das dann in einen entsprechenden container (am einfachsten speicherste direkt nen bild-objekt mit new Image() und dann via image-src die url, dadurch erzeugst du ein bild-objekt und müsstest dir längere ladezeiten ersparen! (das wieder am einfachsten mit allen bildern in einem array, wo du nur noch auf den arrayindex verweisen brauchst, um dadurch an die bild-src zu gelangen)