(Stand: 01.05.24, Adresse: http://www.grammiweb.de/anleitungen/ka_2frames.shtml)
2 Frames gleichzeitig ändern
Sollen sich innerhalb eines Framesets beim Anklicken eines Hyperlinks gleich zwei Frames verändern, kommt man mit einfachem HTML nicht weiter - JavaScript muss her. Aber wie geht das?
Zuerst einmal muss ein Frameset erstellt werden. Für unser Beispiel haben wir die meistverbreitete Variante gewählt: Links die Navigation, rechts den Anzeigebereich und über diesen beiden Elementen eine Kopfzeile, in der beispielsweise ein Werbebanner Platz finden könnte.
Der Quelltext hierzu lautet:
<html>
<head>
</head>
<frameset framespacing="0" border="false" frameborder="0"
rows="70,*">
<frame name="kopfzeile" src="kopf.htm">
<frameset cols="150,*">
<frame name="navigation" src="navi.htm">
<frame name="anzeige" src="anzeige.htm">
</frameset>
</frameset>
</html>
In das erstellte Frameset werden die Seiten "kopf.htm" (für die Kopfzeile, in der Grafik dunkelblau dargestellt), "navi.htm" (Navigation, hellblau) und "anzeige.htm" (Anzeigebereich, weiß) geladen.
Aufgabe ist nun, mit zwei Links in der Navigation jeweils zwei dazugehörige Seiten zu laden: Eine für den Anzeigebereich, eine für die Kopfzeile. Dies wird durch das folgende JavaScript ermöglicht, welches in das BODY-Segment (also zwischen die beiden Einträge <BODY> und </BODY>) der Navigation eingebaut wird:
01:<script language="JavaScript">
02:<!--
03:function
start1()
04:{
05:parent.kopfzeile.location
= "kopf1.htm";
06:parent.anzeige.location
= "anzeige1.htm";
07:}
08:function
start2()
09:{
10:parent.kopfzeile.location
= "kopf2.htm";
11:parent.anzeige.location
= "anzeige2.htm";
12:}
13:--></script>
(Die rot markierten Zeilennummern gehören nicht zum Script und dienen nur der Veranschaulichung. Wollen Sie das Script abtippen, lassen sie diese Nummern bitte weg)
Das Script definiert die beiden Funktionen "start1" und "start2". Die Funktion "start1" lädt in die Kopfzeile (Zeile 05) die Seite "kopf1.htm" und in den Anzeigebereich die Seite "anzeige1.htm". "start2" erledigt gleiches für "kopf2.htm" und "anzeige2.htm" (Zeile 10/11). Hierbei muss in der Initialisierungszeile der Name des gewünschten Frames angegeben werden (im Beispiel also in Zeile 05 das Frame "kopfzeile", das im Frameset-Quelltext definiert wurde, in Zeile 06 "anzeige" etc).
Nun müssen diese Funktionen nur noch aufgerufen werden. Dies geschieht durch Hyperlinks, die ebenfalls in die Navigation integriert werden:
<p><a
href="javascript:start1()">Link 1</a></p>
<p><a href="javascript:start2()">Link 2</a></p>
Klickt man nun auf den Eintrag "Link 1" wird die Funktion "start1" verwendet, bei "Link 2" die Funktion "start2".
Das in dieser Kurzanleitung verwendete Beispiel können Sie sich nun "in der Praxis" anschauen oder downloaden.
[an error occurred while processing this directive] [an error occurred while processing this directive]© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 01.05.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt