Bild automatisch anzeigen/ausblenden

Tualex

Erfahrenes Mitglied
Erstmal der HTML Code:
HTML:
<link rel="stylesheet" type="text/css" href="style.css">
<form method="post" action="">
 Text:<br>
 <select name="text">
<option value="text1">Text1</option>
<option value="text2">Text2</option>
 </select>
 <br/>
 <img width="200" src="image.jpg" id="image">
</form>

Ich will jetzt, dass wenn man Text1 ausgewählt hat ein Bild erscheint, wenn man Text2 auswählt soll ein anderes Bild an dieser Stelle angezeigt werden, das erste jedoch nicht, die seite sollte auch nicht neu geladen werden, bin mir nicht sicher aber vielleicht geht es ja mit Ajax.

Mfg
Tualex
 
Hi,

Du könntest ein Array mit den Dateinamen der Bilder erstellen. Diese werden in der gleichen Reihenfolge
in das Array geschrieben, wie sie in der Selectgruppe aufgerufen werden sollen.
Code:
var arrBilder = new Array("bild1.gif", "bild2.gif");

In der Selectgruppe überwachst Du den Event onchange. Tritt dieser ein, so ermittelst Du anhand
des aktuell gewählten Index das zugehörige Bild aus dem Array und übergibst es dem IMG-Tag.
Code:
onchange="document.getElementById('image').src=arrBilder[this.selectedIndex];"
Ciao
Quaese
 
wenn ich dein Problem richtig verstanden habe dann so:

HTML:
<select name="text" onchange="bild_neu()"  id="auswahl">

wenn jetzt ein Text gewählt ist, wird folgendermaßen das Bild per Javascript geändert:

Code:
function bild_neu()
{
    if(document.getElementById('auswahl').value == "Text1") document.getElementById('image').src = "images/bild2.jpg";
    else document.getElementById('image').src = "images/bild1.jpg";
}
 

Neue Beiträge

Zurück