How to open links in different Frames

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • MosaicMan
    New Member
    • Apr 2010
    • 2
    #1

    How to open links in different Frames

    I've been searching the web for the answer to this question, and I've found people addressing my question, but the answers don't help me. I must be missing a step or something.

    I'm trying to build a simple website with HTML. I learned HTML in high school a few years ago, and due to lack of use, I've forgotten most of it. My layout is to have 3 frames. One at the top that I'll use as a title/header. One on the left, which will be my links frame, where I will list all of my links. The main part of the page will be place on the bottom right. I want to be able to click on a link from my frame on the left and have it open on the frame on the right. From what I read I have to name my frames. Ok, I can do that, but where I name the frames and where the links are are in two different files. How can I do this?


    This is what I have (I know it's not much...I'm extremely rusty).


    Header File (the very top of the page):
    Code:
    <html>
<body style="background-color:#eec591;">
<center>
<h1>TITLE</h1>
</center>
</body>
</html>

    Links/Navigation (on the bottom left of the page):
    Code:
    <html>
<body style="background-color:#eec591;">
NAVIGATION<br>
<a href="drowningtosurvive.html" target="main">Drowning To Survive</a>
</body>
</html>

    Main Body of the page (on the bottom right of the page):
    Code:
    <html>
<body style="background-color:#eec591;">
Here is where stuff goes...
</body>
</html>

    Then, this is the file that pulls all the frames together in 1 page:
    Code:
    <html>
<frameset border=0 frameborder=0 framespacing=0 rows="10%,*">
<frame src="Header.html">
<frameset cols="20%,*%">
<frame src="Navigation.html" name="Navigation">
<frame src="Home.html" name="Main">
</frameset>
</frameset>
</html>




    I'm sure there is a much easier way to post this issue, I just don't know how. In the "Links/Navigation" section I want to click on my "drowningtosurv ive.html" link and have it open in my "Main Body" frame.
    Last edited by Dormilich; Apr 26 '10, 08:01 AM. Reason: Please use [code] tags when posting code
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      The reason you probably haven't been able to find a working solution is because frames are an unnecessary headache. The effect you're wanting can be achieved with little effort. This is something that used to be on W3schools.com. Whether it still is there I have no idea, but the code is still valid. It isn't exactly what you're asking for but it should give you a basic idea of how to achieve the desired affect. Onmouseover would become onmouseclick and instead of calling for text you would call for the webpage you want the link to display.


      [CODE=HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>

      <style type="text/css">
      table {
      background:blac k;
      }
      a {
      text-decoration:none ;
      color:#000000;
      }
      th {
      width:150px;
      background:#FF8 080;
      }
      td {
      font:bold;
      background:#ADD 8E6;
      }
      </style>

      <script type="text/javascript">
      function gettip(txt) {
      document.getEle mentById('tip') .innerHTML=txt;
      }

      function reset() {
      document.getEle mentById('tip') .innerHTML=" ";
      }
      </script>

      </head>

      <body>

      <p>Mouse over the links to see their descriptions</p>

      <table width="400px">
      <tr>
      <th>
      <a href="http://www.w3schools.c om" onmouseover="ge ttip('W3Schools is the best Web Developers resource on the Web')" onmouseout="res et()">W3Schools .com</a>
      </th>
      <td rowspan="3" id="tip"> </td>
      </tr>
      <tr>
      <th>
      <a href="http://www.microsoft.c om" onmouseover="ge ttip('Internet Explorer is winning the browser war')"
      onmouseout="res et()">Internet Explorer</a>
      </th>
      </tr>
      <tr>
      <th>
      <a href="http://my.netscape.com " onmouseover="ge ttip('The Navigator is Netscapes browser tribute to web surfers')"
      onmouseout="res et()">Netscape Navigator</a>
      </th>
      </tr>
      </table>

      </body>

      </html>[/CODE]

      I hope this helps,
      {\_/}
      (' . ')
      (")[DEATH](")
      (")(")


      PS - In this example a table is used for the layout of the page. I highly recommend NOT doing the same in your webpage. The same affect can be accomplished with the div element quite easily.

        Comment

        • MosaicMan
          New Member
          • Apr 2010
          • 2
          #3
          Thank you for the reply and solution.

            Comment

            Previous template Next
            Working...