The main context that you need to use is: parent.[frame name].location.href = 'pagename.htm'; You can use this in your scrips to change the contents of pages on any valid HTML/Javascript Event ie: onMouseOver, onMouseOut, onClick, etc.For this demo I will be using six pages with the following code:1. default.htm
<html> <head><title>Change the URL of a frame using Javascript</title></head> <frameset rows="20%,*"> <frame name="topFrame" src="contents.htm"><!-- make sure that you remember the name assigned to the frame for use in your code later --> <frame name="baseFrame" src="body.htm"> </frameset> <body> </body> </html>
2. contents.htm
<html> <head><title>Table Of Contents</title> <script> function changePage(strPage) { parent.baseFrame.location.href = strPage; /*This line is the one that changes the baseFrame frame URL. strPage can be substituded with a hardcoded string.*/ } </script> </head> <body> <a href="javascript:void(0);" onClick="changePage('page1.htm')">Page 1</a> <!-- javascript:void(0) tells the browser not to actually change the page in the current browser, but you still want the words to appear as a hyperlink --> <a href="javascript:void(0);" onClick="changePage('page2.htm')">Page 2</a> <a href="javascript:void(0);" onClick="changePage('page3.htm')">Page 3</a> <a href="javascript:void(0);" onClick="changePage('body.htm')">Home</a> </body> </html>
3. body.htm
<html> <head><title>Main Body Page</title></head> <body> This is the main body page that first appears. </body> </html>
4. page1.htm
<html> <head><title>Page 1</title></head> <body> This is Page 1 </body> </html>
5. page2.htm
<html> <head><title>Page 2</title></head> <body> And here is page 2 </body> </html>