[JScript]Bild-URL ändern bei Klick auf Liste

Status
Nicht offen für weitere Antworten.

g-zus

Erfahrenes Mitglied
Hi Leude,

so, ich hab da ein kleines Problem.
Und zwar siehts so aus:

Ich habe ein Select-Feld/Menüliste und ein Bild.
Nun will ich, dass wenn ich aus der Liste einen anderen Eintrag als den aktuellen Wähle sich das Bild ändert, also ein anderes angezeigt wird.
Das Bild is gleich daneben/darunter platziert.

Als JavaScript habe ich da folgendes mal gefunden:

PHP:
<script language=javascript>

function search_select(engine){
switch(engine){
case 'bild1': document.suchbild.src='http://www.domain.com/bild1.jpg';break;
case 'bild2': document.suchbild.src='http://www.domain.com/bild2.jpg';break;
case 'bild3': document.suchbild.src='http://www.domain.com/bild3.jpg';break;
case 'bild4': document.suchbild.src='http://www.domain.com/bild4.jpg';break;
}
}

</script>

Das Bild, also der IMG-Code wurde mit dem Eintrag name=suchbild ergänzt.

Dieses Script lässt sich jetzt recht einfach z.B. mit Radiobuttons verwenden.
Wenn man hier jetzt dann onFocus="search_select('bild1')" verwendet, dann ändert sich durch klick auf den Radiobutton das Bild.

Dies wollte ich jetzt aber für solch ein Listenmenü verwenden.
Doch da funktionierts bisher leider nicht......

Zuerst habe ich es mit onClick, onFocus, onSelect usw. bei den einzelnen OPTION-Zeilen des SELECT-Feldes probiert, also so:

PHP:
<select ....>
 <option value="#" onSelect="search_select('bild1')">blabla</option>
</select>

Da ich ned wusste welchen Befehl man hier verwendet (onSelect, onClick, etc.) hab ich einfach alle durchprobiert funzte alles nicht.

Dann habe ich es so probiert:

PHP:
<select onChange="search_select(this.form)">>
 <option value="bild1" >blabla</option>
</select>

das funzte leider genauso wenig.

Kann mir da wer von euch weiterhelfen?
Hab leider eher wenig Ahnung von JS...
 
Warum so umständlich per Switch(das wurde doch eh erst in JS v1.2 eingeführt?!)

<script type="text/javascript">
function search_select(engine){
document.suchbild.src='http://www.domain.com/'+engine+'.jpg'
}
</script>

onchange oder onselect,sollte beides gehen
 
wo muss ich welches platzieren?

also ich hab bisher immer das onChange im <select>-Teil reingebaut.
das onSelect gehört dann wahrscheinlich in jede einzelne <option>-Row, oder?

Naja, danke.
ich probiers mal.....
 
so, habs jetzt hingekriegt, war aber noch bissel arbeit!

so siehts jetzt aus:

PHP:
<script language=javascript>

function search_select(form){

var myindex = form.pre_select.selectedIndex

document.suchbild.src='http://www.domain.com/'+form.pre_select.options[myindex].value+'';

}

</script>

pre_select ist der Name des Liste.
Und so sieht dann die Liste aus:

PHP:
      <select name="pre_select" onChange="search_select(this.form)">
	<option value="">Bild auswählen</option>
	<option value="bild1.gif">Bild1</option>
	<option value="bild2.gif">Bild2</option>
      </select>

So funzt es endlich so wie ich wollte.
Aber danke tool, dank dir sieht mein JS-Script um längen leichter aus und ich muss nicht umständlich mit dem Switch-Befehl arbeiten und hab damit weniger zum nachkorrigieren! :)
 
Keine Ahnung, wie du das hingezaubert bekommen haben sollst, denn das Objekt "form" innerhalb des select-Objektes bei dir existiert ja gar nicht; jedenfalls denke ich folgender Code ist schlüssiger ;)
PHP:
<script type="text/javascript" language="JavaScript">
<!--
function search_select(sel) {
	document.suchbild.src = "http://www.domain.com/" + sel.options[sel.selectedIndex].value + "";
}
//-->
</ script>
(</ script zusammen)

als JavaScript-Part und diesen Formular-Part:
PHP:
<form name="theform">
<select name="pre_select" onchange="search_select(this)">
    <option value="">Bild auswählen</option>
    <option value="bild1.gif">Bild1</option>
    <option value="bild2.gif">Bild2</option>
</select>
</form>
Sieht für mich logischer aus. :)

Geist
 
will ja nicht an deinen programmierkenntnissen zweifeln, aber bei mir klappts auch so, ohne irgendwelche fehlermeldungen.

=======> es muss richtig sein

_____________________________________

q.e.d.








=)
 
Sag' ja - hätte für mich keine Logik was das DOM beträfe, wenn du verstehst was ich meine!?

Aber ich kenn' auch nicht den ganzen Aufbau des Dokumentes, wo kann man sich das denn mal anschauen, vielleicht erklärt sich's dann für mich logisch? :)

Geist
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück