Links per Kombinationsfeld verwalten

Sie möchten auf Ihrer Homepage ein Kombinationsfeld einrichten, das Ihre gesammelten Links enthält. Besucher Ihrer Seite sollen diese Links dann per Schaltfläche ansteuern.

Dieses Vorhaben können Sie mit den Bordmitteln von HTML und Unterstützung durch JavaScript realisieren. Sie finden das folgende Listing auf der Heft-CD unter CHIP-Code listings:

<HTML>
<HEAD>
<TITLE>CHIP - TIPPS UND TRICKS</TITLE>
<SCRIPT language=“JavaScript“>
<!— vor alten Browsern verstecken



   function rufeSeite()

   {

      var seite

      var index



      index = document.form_eingabe.nextsite.selectedIndex;

      seite = document.form_eingabe.nextsitet

       [index].name;



      location.href=seite

      return true;

   }



// —>
</SCRIPT>
</HEAD>


<BODY>
<CENTER>
<FORM name=“form_eingabe“>
   <P>Die nächste HTML-Seite auswählen:</P>
   <P>
      <SELECT name=“nextsite“ size=“1“>
         <OPTION name=“http:\\www.chip.de“>CHIP Online</OPTION>
         <OPTION name=“<Ihre URL>“>Homepage</OPTION>
      </SELECT>
   </P>
   <P>
      <INPUT type=“button“ name=“Knopf“ value=“Seite öffnen“ onclick=“rufeSeite()“>
   </P>
</FORM>
</CENTER>
</B>
</BODY>
</HTML>
Die Auswahlliste Ihrer Links definieren Sie mit Hilfe der Befehle »SELECT« und »/SELECT«, wobei Sie dazwischen die einzelnen Listeneinträge mit »OPTION« und »/OPTION« angeben. Die verschiedenen Objekte des HTML-Dokuments müssen mit Hilfe des Parameters »name« eindeutige Namen erhalten. Im Beispiel heißt das Formular »form_eingabe« und die Auswahlliste »nextsite«. Benennen Sie die Listeneinträge mit ihrer vollständigen URL. Wenn Sie beispielsweise auf »CHIP Online« verweisen möchten, lautet der korrekte Name »http://www.chip.de«.

Der INPUT-Befehl des Typs »button« erzeugt eine neue Schaltfläche. Diese aktiviert die unter »onclick« angegebene JavaScript-Funktion »rufeSeite()« zwischen »HEAD« und »/HEAD«. Dabei erkennt die Funktion den ausgewählten Eintrag am Wert der Eigenschaft »selected Index« des Objekts »document.form_eingabe.nextsite« und speichert seinen Index in die gleichnamige Variable.

Als nächstes schreibt die Anweisung »document.form_eingabe.nextsite[index].name« den Namen des ausgewählten Eintrags in die Variable »seite« und übergibt diese schließlich an die Objekteigenschaft »location.href«. Da Letztere immer die URL der aktuellen Internet-Seite enthält, navigiert der Browser automatisch zur gewählten Adresse.