Radiobuttons

Bisher hast du Textfelder und Listenfelder als Formularelemente kennen gelernt.
Radiobuttons bieten ähnlich wie Listenfelder einen schnellen Zugriff auf mehrere Auswahlmöglichkeiten.

• Erstelle eine HTML-Seite kleidung.htm
  


• Füge eine Überschrift "Wähle ein Kleidungsstck" ein.
• Die Radiobuttons zeigen die Wahlmöglichkeiten.
• Im Textfeld wird der beschreibende Text angezeigt.
• Das Bild zeigt das gewählte Kleidungsstück
.
• Schreibe ein Script, das
  • prüft, welcher Radiobutton angeklickt wurde.
  • den passenden Text ...
  • ... und das entsprechende Bild anzeigt..

• Die Bilder

  Jeans	Pullover	T-Shirt	Schuhe

• Die Radiobuttons:

  <form name="Kleidung" action="">
  
  <input type="radio" name="Marke" value="Jeans" onClick="Zeigen()" />Jeans
  . . .
  </form>
  

• Die Tabelle hilft, die Überschriften, Bild und Textfeld nebeneinander anzuordnen.

  <table cellspacing="3" cellpadding="3" rules="rows">
  <tr>
     <th>Produktinfo</th>
     <th>Bild</th>
  </tr>
  
  <tr>
     <td style="vertical-align:top">
     <textarea  name="Anzeige" rows=8  cols="40" readonly="readonly">
     </textarea>
     </td>	
     <td height="200" style="vertical-align:top" width="100">
     <img name="Beispiel"  src="leer.jpg"  height="180" border="0" />
     </td>
  </tr>
  </table>

• Die Bilder werden in einem Array zugeordnet.

  var Bild=new Array()
  Bild[0]="jeans.jpg";
  Bild[1]="pullover.jpg";
  Bild[2]="t-shirt.jpg";
  Bild[3]="schuhe.jpg";

  Achte darauf, dass die Pfade stimmen!
• Auch die zum Kleidungsstück gehörigen Texte werden in einem Array angeordnet

  var InfoText=new Array()
  InfoText[0]="Blue Jeans\rin used-Optik"
  InfoText[1]="Pullover \raus 100% Baumwolle"
  InfoText[2]="T-Shirt, \rSchmaler Schnitt mit rundem Ausschnitt"
  InfoText[3]="Herrenschuhe\rSchn\u00FCrer im casual-Look"
  

• Die Funktion Zeigen prüft, welcher Radiobutton angeklickt wurde und ordnet die entsprechenden Bilder und Text zu.
  Zunächst stellt eine for-Schleife fest, welcher Radiobutton aktiviert wurde.

  function Zeigen()
  {
     for (i=0;i<document.Kleidung.Marke.length;i++)

  checked stellt anschließend fest, ob der gerade geprüfte Button angekreuzt ist ...

     if (document.Kleidung.Marke[i].checked)

  ... und ordnet den passenden Text und das Bild zu.

     {
          document.Kleidung.Beispiel.src=Bild[i];
          Text=InfoText[i];
     }
  }