Kontaktformular mit Bilder bei Auswahl

[correl]

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>

 

[lascaux]

Das ist eher eine Javascript-Frage als eine HTML-Frage ;)


Deine Lösung des Problems, kannst du mit einer function und mittels onclick bzw onselect lösen


Hier als Beispiel:

<a href="#" onclick="anzeigeBlau()" title="">Produkt in Blau anzeigen</a>

Im Javascriptteil dann das

function anzeigeBlau() {
  document.getElementById('vorschau').src = 'ProduktInBlau.jpg';
}

Das Element was dabei angesteuert wird, wäre dann in diesem Fall ein <img />-Tag mit der ID 'vorschau'. Über den Klick auf den Link wird Javascript dazu aufgefordert die Quelle (source) zu ändern, in diesem Fall dann auf 'ProduktInBlau.jpg'. Das ganze funktioniert auch auf die selbe Weise mit einem Select-Tag, Checkbox oder Radiobuttons. In dem Fall dann aber mit onselect oder onchange



lascaux