Multilpe Frames

frameset Source Code

<html>
<head>
<title>javascript FRAMES DEMO</title>
</head>
<frameset cols="50%,50%" border=1>
<frameset rows="35%,65%" border=1>
<frame src="frameX.html" name=X>
<frame src="frameY.html" name=Y>
</frameset>
<frameset rows="12%,44%,44%" border=1>
<frame src="frameA.html" name="A">
<frame src="frameB.html" name="C">
<frame src="frameC.html" name="B">
</frameset>
</frameset>
</html>

First create the frameset. Then create and open the document which will serve as the Menu or Navigation frame....

frame"X" Source Code (Menu or Navigation frame)

<html>
<head> </head>
<body>
<center>
<table border="0" cellpadding=3 cellspacing=3>
<tr><th> 
  Dogs: </th></tr> 
<tr><td> 
<a href="fkuvasz.html" target="Y"
     onClick="parent.frames['A'].location='fkuvasz1.html';
              parent.frames['B'].location='fkuvasz2.html';
              parent.frames['C'].location='fkuvasz3.html'">
Kuvasz</A></td></tr>
<tr><td>
<a href="fairdale.html" target="Y"
 onClick="parent.frames['A'].location='fairdale1.html';
          parent.frames['B'].location='fairdale2.html';
          parent.frames['C'].location='fairdale3.html'">
Airdales</A></td></tr>
<tr><td>
<a href="fretriever.html" target="Y"
 onClick="parent.frames['A'].location='fretriever1.html';
          parent.frames['B'].location='fretriever2.html';
          parent.frames['C'].location='fretriever3.html'">
Retrievers</A></td></tr>
<tr><td>
<a href="frameA.html" target="Y"
 onClick="parent.frames['A'].location='frameA.html';
          parent.frames['B'].location='frameB.html';
          parent.frames['C'].location='frameC.html'">
Clear Frames</A></td></tr>
</table>
</center>
</body>
</html>
 

Although this JavaScript Code Example seems longer than the others, it is actually a simple script. Each link within the Menu repeats the same syntax:

          <a href="fkuvasz.html" target="Y"
               onClick="parent.frames['A'].location='fkuvasz1.html';
                            parent.frames['B'].location='fkuvasz2.html';
                            parent.frames['C'].location='fkuvasz3.html'">Kuvasz</A>

 parent is a reference to the parent document, also known as the frameset Document.
 frames['frameName']defines the particular frame within the frameset.
The statement: parent.frames['frameName'].location='newPage.html' tells the browser to change the page location of the indicated frame to a specified new page. In this example, each "onClick" event handler changes three frames simulaneously (the fourth frame is updated by the a href tag). Any number of similar statements could be combined and connected to a single "onClick" event handler.