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.