Changing Two Frames With One Click
The first thing you will need is a frameset to get you started. For simplicity, I will use a frameset with two frames. Here is the code for the frameset page:
<title>Frames Example 5</title>
<frame src="page1.htm" name="left_frame">
<frame src="page2.htm" name="right_frame">
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:
<body bgcolor="#ffffff" text="#000000">
Click the link below to change both 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:
Now, give it a try yourself. If you are using frames, this may be a handy trick for you sometime. So, go on to the next section: Client Side Image Maps.