Bildanzeige bei Dropdownauswahl?

Hi,

erstelle ein Selectfeld, dessen Optionen als Werte die Bildquellen enthalten. Im onchange-Event weist du dem Bildobjekt über seine ID das gewählte Bild zu.

Beispiel:
Code: 
<div>
  <select onchange="document.getElementById('imgID').src=this.options[this.selectedIndex].value;">
    <option value="http://lous.dartdiddl.de/configmaker/3dsky0.jpg">0</option>
    <option value="http://lous.dartdiddl.de/configmaker/3dsky1.jpg">1</option>
  </select>
  <img id="imgID" src="http://lous.dartdiddl.de/configmaker/3dsky0.jpg">
</div>
Ciao
Quaese
 
Also erstmal wieder DANKE an Quaese :) Der mir wieder mal hilft.

ABER ich hab nun mal die Seite erstellt

http://lous.dartdiddl.de/configmaker/index.html

Hab da nur 2 Fragen zu, ich will das als source 0.jpg angezeigt wird und wenn man auf die Seite geht das da noch kein Wert(0,1) ausgewählt ist.

Und ich wollte das die auswahlbox genau neben "r_3dsky" steht und nicht unten neben dem Bild.

Also wenn du mir dabei helfen könntest, wäre es sehr sehr sehr sehr nett, wie immer :D
 
Hi.

Code: 
<div>
  <select onchange="document.getElementById('imgID').src=this.options[this.selectedIndex].value;">
    <option>Bitte auswählen</option>
    <option value="0.jpg">0</option>
    <option value="1.jpg">1</option>
  </select>
  <img id="imgID" src="0.jpg" style="vertical-align:top;">
</div>
Übrigens darf ein ID-Bezeichner nicht mit einer Ziffer beginnen.
 
Danke erstmal für die schnell Hilfe, vielen Dank.

Also sollte ich bei dem ID bezeichner in dem Fall z.b. "r_3dsky" reinschreiben? oder kann ich "imgID" auch stehen lassen?
 
Den ID-Namen kannst du selbstverständlich frei auswählen und bist nicht an Quaeses Vorgabe gebunden, jedoch darf er eben nicht mit einer Ziffer beginnen.
 
Ok danke dir für die echt tolle Hilfe, hast mir wirklich sehr weitergeholfen!


Und nun kommt meine aller letzte Frage, ehrlich ;D

Also später werden auf der Seite noch mehr Commands stehen, wie z.b. "r_rootlod" (1-5) oder "net_graph" (0-3) usw.

So und wenn nun einer bei "r_3dsky" 1 auswählt, bei "r_rootlod" 3 auswählt und bei "net_graph" 2 auswählt, dann wollte ich das er die Config generieren lassen kann, also wenn er auf den Button "Generate Config" drückt das dann in dem Fall in einem Pop-Up Fenster das hier steht:

r_3dsky "1"
r_rootlod "3"
net_graph "2"

Also nur die Werte die er ausgewählt hat.


Danke!
 
Hi,

du könntest den name-Attributen der Selectgruppen Namen geben, anhand derer sie einfacher identifiziert werden können, z.B. sel_r3dsky. Im geöffneten Dokument können anhand eines Arrays, das die Namen enthält, und der Methode getElementsByName die benötigten Elemente ermittelt werden.

Beispiel:
Ausgangsdokument
Code: 
<div>
<select name="sel_r3dsky" onchange="document.getElementById('r3dsky').src=this.options[this.selectedIndex].value;">
  <option value="http://lous.dartdiddl.de/configmaker/none.jpg">Bitte auswählen</option>
  <option value="http://lous.dartdiddl.de/configmaker/0.jpg">0</option>
  <option value="http://lous.dartdiddl.de/configmaker/1.jpg">1</option>
</select>
<img id="r3dsky" src="http://lous.dartdiddl.de/configmaker/none.jpg" style="vertical-align: top;">
</div>
<div>
<select name="sel_r_rootlod" onchange="document.getElementById('r_rootlod').src=this.options[this.selectedIndex].value;">
  <option value="http://lous.dartdiddl.de/configmaker/none.jpg">Bitte auswählen</option>
  <option value="http://lous.dartdiddl.de/configmaker/0.jpg">0</option>
  <option value="http://lous.dartdiddl.de/configmaker/1.jpg">1</option>
  <option value="http://lous.dartdiddl.de/configmaker/0.jpg">2</option>
  <option value="http://lous.dartdiddl.de/configmaker/1.jpg">3</option>
</select>
<img id="r_rootlod" src="http://lous.dartdiddl.de/configmaker/none.jpg" style="vertical-align: top;">
</div>
<div><a target="_blank" href="9281b.html">Open</a></div>

PopUp-Dokument (muss vom Ausgangselement aus geöffnet werden!)
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
function getOpenerData(){
  var arrNames = new Array("sel_r3dsky", "sel_r_rootlod");
  var objDok = opener.document;
  var strOut = "";

  for(var i=0; i<arrNames.length; i++){
    strOut += arrNames[i].split("sel_")[1] + " - " + objDok.getElementsByName(arrNames[i])[0].options[objDok.getElementsByName(arrNames[i])[0].selectedIndex].text + "<br>";
  }

  document.getElementById("outID").innerHTML = strOut;
}
  //-->
</script>
</head>
<body>
<button onclick="getOpenerData()">getOpenerData()</button>
<div id="outID"></div>
</body>
</html>
Ciao
Quaese
 
Hi,
also ich bin echt sprachlos, dass eine Person soooo viel Ahnung hat :D

Aber ich hab mal wieder eine Frage und zwar funktioniert das Ausgangsdokument einwandfrei und das PopUp-Dokument habe ich auch erstellt, aber wenn ich nun bei dem Ausgangsdokument auf "Open" klicke, dann öffnet sich ja lögischerweise ein neues Fenster(alles soweit richtig). In diesem neuen Fenster muss ich allerdings nochmals auf einen Button drücken "getOpenerData()" ( Ja ich weiss, diesen kann man umbenennen ;D).

Kann man es nicht so anstellen, dass in dem 2. Fenster sofort die Werte angezeigt werden ohnen das man nochmals auf einen Button drücken muss?

Danke dir vieeeeelmals, ich weiss gar nícht wie ich das gut machen soll :(
Du bist echt klasse!
 
Hi,

du kannst das Script zum Beispiel im onload-Event des PopUp-Dokuments aufrufen.
Code: 
window.onload = function(){
  getOpenerData();
}
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück