What we'll do is build the first example from scratch. Before I do, let me note that these instructions are geared towards those using Windows95 (or any operating system that can deal with long filenames). If you're running Windows3.x you'll have to use the file extension .htm and adjust the scripting accordingly.
First you'll need a few target documents. Copy the following and save as hugh_ed.html in a new folder somewhere.
<htm>
<FONT SIZE=3>Hugh's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Ed</FONT>
</HTML>
Save this as hugh_cal.html.
<HTML>
<FONT SIZE=3>Hugh's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Calvin</FONT>
</HTML>
Save this as ron_mike.html.
<HTML>
<FONT SIZE=3>Ron's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Mike</FONT>
</HTML>
And this as ron_pete.html.
<HTML>
<FONT SIZE=3>Ron's friend</FONT><BR>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<FONT SIZE=4>Pete</FONT>
</HTML>
You should now have a folder with four documents in it...
Next you'll need a master page. It will have a left "directory" frame and the right side will be divided in half horizontally. Save the following as index.html.
<HTML>
<FRAMESET COLS="160,*">
</HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAME>
<FRAMESET ROWS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>
Next, we need to specify what will be put into each frame when the page first loads. (We haven't made direct.html yet)
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="hugh_ed.html">
<FRAME SRC="hugh_cal.html">
</FRAMESET>
</FRAMESET>
</HTML>
And, especially for what we're doing here, you gotta give each frame a NAME. Or should I say only those frames that will change. In our example, the directory frame never changes so we don't really need to name it.
<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>
<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="hugh_ed.html" NAME="Frame_A">
<FRAME SRC="hugh_cal.html" NAME="Frame_B">
</FRAMESET>
</FRAMESET>
</HTML>
VIEW IT (Keep in mind that we haven't made the directory page yet)
And that's it for the master page.
The next thing we need to make is the directory page. Start with this and save it as direct.html.
<HTML>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
</BODY>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
All that's left is to add link information and JavaScript commands to direct.html. First add the links.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
Hugh's friends<P>
Ron's friends<P>
</BODY>
</HTML>
Now wrap the links in anchor tags.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A>Hugh's friends</A><P>
<A>Ron's friends</A><P>
</BODY>
</HTML>
VIEW IT (no visible changes)
Here's where it get's a little confusing so, if you're at all like me, you'll want to take this nice and slow.
First, pop a set of JavaScript tags in the document <HEAD>. Make sure that it's in the HEAD tag and not within the BODY tag.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A>Hugh's friends</A><P>
<A>Ron's friends</A><P>
</BODY>
</HTML>
VIEW IT (no visible changes)
Now insert the scripting. Don't worry about what it means just yet. Just paste it in there for now.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A>Hugh's friends</A><P>
<A>Ron's friends</A><P>
</BODY>
</HTML>
VIEW IT (no visible changes)
Next, finish the links. Once again, I'll explain what's going on in a minute.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<H3>Directory</H3>
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
</BODY>
</HTML>
And that's it. Next we'll see exactly what's happening. (if you haven't figured it out already)
In the link part...
<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>
<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>
...you simply insert the name of the html files. In the head tag we put a function. It's called a function because it performs an action. Let's suppose we made a function called fry(). It would fry whatever we sent to it. We could fry('egg') -or- fry('bacon') -or- fry('egg','bacon'). The end result would depend on what we passed to fry(). In our excercise we're calling the function multiLoad(). And we're telling that function to multiLoad('hugh_ed.html', 'hugh_cal.html') or multiLoad('ron_mike.html', 'ron_pete.html') depending on what link is clicked.
There's more...
In the function part...
function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}
...we define the function. Let me continue with the fry thing. The first line in our function is like saying fry(x,y), we can send it egg,bacon, or fish,chips, or pancakes,sausage (this is really making me hungry).
In our function multiLoad(doc1,doc2), we are sending it hugh_ed.html,hugh_cal.html or ron_mike.html,ron_pete.html depending on what link is clicked.
The next two lines in the code define what to do with hugh_ed.html, etc. In a nutshell it says...
1- Place doc1 in Frame_A (doc1 being the first argument that was passed to the function - hugh_ed.html)
2- Place doc2 in Frame_B (doc2 being the second argument that was passed to the function - hugh_cal.html)
I know I'm probably over-explaining this, but I suppose that's better that under-explaining it.