Tips & Tricks: Fernsteuerung und HTML |
In diesem Tip bastelln wir uns eine Fernsteuerung. Dabei öffent sich per Klick auf einen Link ein neues Fenster, von dem aus Sie auf Inhalte zusteuern können. Eine Fernsteuerung eigenet sich hervorragend, um die Navigation der Seiten übersichtlicher zu machen. Zunächst benötigen wir folgendes Script im Header-Bereich. Dieses Script muß sich auf der Seite befinden, in der das Fenster geöffnet werden soll:
var neu = null; function Fernsteuerung() { neu = window.open('', 'FS', 'width=400,height=220'); if (neu != null) { if (neu.opener == null) { neu.opener = self; } neu.location.href = 'fsdemo.html'; } }
Die Anweisung window.open können Sie nach eigenen Bedürfnissen konfigurieren (s. Tip: Fenster und HTML). In der Zeile neu.location.href geben Sie den Pfad der Datei an, die als Inhalt der Fernsteuerung dient. Den Link zur Fernsteuerung binden Sie wie folgt ein:
<A HREF="javascript:Fernsteuerung()"> .. Text .. </A>
Nun kommen wir zum zweiten Teil des JavaScripts. Hierbei handelt es sich um die eigentlich Datei, die den Inhalt der Fernsteuerung bereit hält (in userem Beispiel die Datei fsdemo.html). Hier binden wir nun folgendes Script in den Header-Bereich ein:
function start(url) { opener.location = url; } function zu() { window.close() } function nachricht(txt){ opener.status = txt; setTimeout("remove()",2500); } function remove(){ opener.status=""; }
Mit der Funktion start(url) erreichen wir, daß ein Link im ursprünglichen Fenster ausgeführt wird. Mit der Funktion zu() können wir die Fernsteuerung per Mausklick schließen. Die Funktionen nachricht(txt) und remove() bewirken, daß ein Erklärungstext in der Statuszeile des ursprünglichen Fenster angezeigt wird. Mit setTimeout wird erreicht, daß der Erklärungstext nach der festgelegten Zeit wieder verschwindet. Falls Sie dies nicht möchten, so lassen Sie die letzten beiden Funktionen einfach weg. Die Einbindung der Links in der Fernsteuerung erfolgt nach folgendem Muster:
<A HREF="JavaScript:start('fenster2.html')" onMouseOver="nachricht('Text..');return true;"> Text ..</A>
Im Anker-Tag definieren Sie unter der Funktion start( .. ) nun die Zieladresse. Die Anweisung onMouseOver müssen Sie entfernen, falls Sie keine Erklärungstexte anzeigen möchten. Um das Fenster zu schließen, binden wir noch einen Button ein, der die Funktion zu() beinhaltet:
<FORM> <INPUT TYPE="button" VALUE = "Fertig" onClick = "zu()"> </FORM>
Sie können hierbei natürlich auch einen einfachen Link oder eine Grafik verwenden. Hierzu wird im Anker-Tage einfach die Funktion hinzugefügt:
<A HREF="JavaScript:zu()"> Text oder Grafik< /A>.
Und so sieht unser Beispiel nun aus: Demo aufrufen.