JavaScript : Links Modifying Several Frames
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.