Q I have a Web site which utilises frames. When I click a link in one frame, I would like the contents of all frames to be updated. I thought I could do it like this:

<A HREF="page1.html" TARGET="frame1" HREF="page2.html" TARGET="frame2" HREF="page3.html" TARGET="frame2">. Is this the right way?

A Almost, but not quite. The logic is fine, but unfortunately your HTML code wonÆt work because it doesnÆt follow standard HTML syntax. The process of using a hyperlink in one frame to load a new page in another frame is called "targeting". You can achieve this by adding the TARGET attribute to the <A> anchor tag that will be clicked to load a new page. For example, the code: <A HREF="page1.html" TARGET="frame1">Click Me</A> creates a hyperlink called "Click Me" in one frame which will load the document called page1.html in the frame called "frame1". HTML only lets you specify one TARGET attribute for each <A> tag, making it impossible to change multiple frames from one link using this method. However, the good news is that you can change multiple frames with one click by using JavaScript. Any hyperlink in your page can be transformed from a boring, old ordinary link to a one-click wonder by adding some JavaScript code similar to onClick="window.self.location='newpage.html'".

To illustrate this concept, IÆve created a simple Web page that is divided into two columns by frames, using the following code:

Caption: Click on Guitar in the left-hand frame...

Caption: ...and both frames are updated simultaneously

The left frame, which is called "index" using the NAME attribute of the <FRAME SRC> tag, contains a page called index.html. It displays a list of links which act as an index for visitors. When you start using frames itÆs important to name them in this way to prevent major headaches when you try to pull all your frames and pages together and make them behave. ItÆs also a good idea to organise your frames, names and targets on paper before you actually begin writing the HTML. Of course, some WYSIWYG HTML editors will save you lots of pain by doing most of the work for you, and thatÆs a good idea too!

The HTML for index.html is:

The right frame of my page is named "main" and it contains a page called main.html. This frame acts as a display and information area. The code for main.html is:

Index.html (in the left frame), contains a hyperlink called "Guitar" that changes both left and right frames simultaneously. When the Guitar hyperlink is clicked, the left frame changes to a page called sideguitar.html, which has the following structure:

The right frame now holds a page called guitar.html which looks like this:

The magical JavaScript that makes these pages work is contained in the link <A HREF="guitar.html" onClick="window.self.location='sideguitar.html'" TARGET="main">Guitar</A>, which is part of index.html. The <A HREF="guitar.html" section refers to the new document, guitar.html, that will load into the right frame when the link is clicked. The term onClick simply means "when someone clicks this", and window.self.location points to the window where onClick occurs, that is, the left-hand frame, which changes to contain the file called sideguitar.html. The right hand frame is changed by the TARGET="main">Guitar</A> section, which targets the frame called "main" as the new host for guitar.html.

There are other ways of using JavaScript to change multiple frames, but this one does the job nicely, and can be modified to suit other frames. It's also inline (inside an HTML tag) so you don't need to use <SCRIPT> tags in your page. If you use JavaScript, syntax is crucial, so make sure to include all the dots, spaces and quotes as they are in the example code. Also, remember that not every browser can cope with JavaScript. This particular example works with Netscape Navigator 2.x, 3.x and 4.x, and also with Microsoft Internet Explorer Version 3.x and higher.