Neu: Inspirationen für Webdesigner

Entdecken Sie die schönsten Seiten im Netz

Hier klicken und mehr erfahren

Finden Sie harmonische Farben

Mit MyColor Studio, dem professionellen Farbmanagement für Ihre Webseite

Hier klicken und mehr erfahren

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.

So sieht das Frameset aus

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.


Zurück zum Inhaltsverzeichnis

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 27.07.2016
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt