The first thing you will need is a frameset to get you started. Again, I will use a frameset with two frames. Here is the code for the frameset page:
<HTML> <HEAD> <TITLE>Frames Example 5</TITLE> </HEAD> <FRAMESET cols="20%,80%"> <FRAME SRC="page1.htm" name="left_frame"> <FRAME SRC="page2.htm" name="right_frame"> </FRAMESET> </HTML>
Be sure you give each frame a name using the name=" " attribute. I named the frames above "left_frame" and "right_frame".
Now, create html files for each frame you will need to use. Since I have two frames, and want to change both frames at once, I need 4 html files. I called mine "page1.htm", "page2.htm", "page3.htm", and "page4.htm".
Now, since I am using the left frame for my navigation, that is where I am going to put the link to change the two frames. The html page for the right frame does not need to be modified at all, unless you just want to....
Edit the Left Frame HTMLNow, to make this work, we need to edit the html page that makes the left frame. In this case, the left frame is "page1.htm". So this is the file we need to work on. Here is what we need to have in the html code to get the link to change multiple frames:
That is where you tell the browser what html pages you want to change both frames to, and where you use the frame names we gave our frames earlier. In general, it would look like this:
Replace your_frame_name with the name of your frame from earlier. Replace url with the web address of the page you want to change to. Mine was named "left_frame", and I wanted to change the page to "page3.htm", so I got the line:
Do the same for the second frame. My other frame was named "right_frame" and I wanted to change to "page4.htm":
That's the only part of the script you really have to edit. If you used the same names and pages I did, you didn't need to edit at all. As far as the url goes, you can also use a full url if the page you want to link to is not in your directory. You could have something like this:
Give it a TryTo see the code in action, click the link below for a sample page:
In the example, you probably saw that I had a link to change the frames back again. If you want to add a link like that, you will need to edit the second left frame's html code. In my example, it would be "page3.htm" that you would need to edit. You can add the same script and code, but change the urls in the javascrpt function to lead back to your first two frames. I wanted to go back to "page1.htm" and "page2.htm". My example code for the url change looked like this:
Now, give it a try yourself. If you are using frames, this may be a handy trick for you sometime.
||By: John Pollock||