JavaScript : Links Modifying Several Frames
Contents ]
Dr Benton

Creating Multiple Links

Open the page frame_1.htm (the one which will contain the multiple links) in your favourite text editor.

Our links are a bit unusual in that they don't seem to be going anywhere! Why's that? Simply because we have to do the redirecting ourselves. These are called non-directed links.

Here is the syntax for a non-directed link:

<A HREF="javascript:void(0)">Try to click</A>

If you test the previous link, it will be non-reactive. Well, not exactly. It is in fact reactive, but we are asking JavaScript to sit back and do nothing. This technique allows you to obtain the default rendering for the link (underlined and blue).

You then add a bit of JavaScript code onto these neutral links, which will launch the loading of the pages in the frames. We will simply use the onClick:

onClick="parent.frame_3.document.location.href = 'contenu_0.htm'; parent.frame_2.document.location.href = 'menu_0.htm'"

This code places the content of contenu_0.htm in the frame named frame_3 and the page menu_0.htm in the frame frame_2. It will load immediately.

Customise! When adapting these instructions to your pages, don't forget to replace the names of the frames and the targeted documents (shown above in red) with those from your site, if necessary with the full path of the pages to be displayed.

To round off, here are the instructions to add in the body of the page frame_1.htm:

<A HREF="javascript:void(0)" onClick="parent.frame_3.document.location.href = 'contenu_0.htm'; parent.frame_2.document.location.href = 'menu_0.htm'">
Subject 0
</A>
<A HREF="javascript:void(0)" onClick="top.frame_3.document.location.href = 'contenu_1.htm'; top.frame_2.document.location.href = 'menu_1.htm'">
Subject 1
</A>

That's it! Now it's up to you to adapt this technique for your site.