title: Display div in another frame
body: <p>I have an index file containing a frameset:</p>
  
  <pre><code>&lt;frameset border="1" frameborder="0" framespacing="0" rows="7%,93%"&gt;
    &lt;frame src="index_top.htm" scrolling="no" marginwidth="0"
    marginheight="0" noresize name="top" target="_self"&gt;
      &lt;frame name="main" src="index_main.html"
      scrolling="auto" marginwidth="0" marginheight="0"&gt;
    &lt;noframes&gt;
  </code></pre>
  
  <p>The <code>index_top</code> file looks as following (just the relevant parts):</p>
  
  <pre><code>&lt;table width="100%" border="0" align="left" cellpadding="3" cellspacing="3" class="menyrad"&gt;
    &lt;tr valign="middle" align="center"&gt;
      &lt;td width="10%" id="homenav"&gt;&lt;a href="framsida_test.html" onClick="changeClass(1)"&gt;Furniture home&lt;/a&gt;&lt;/td&gt;
      &lt;td width="10%" colspan="6"&gt;Currently browsing: &lt;i id="mainlink"&gt;&lt;span id="header"&gt;Select page&lt;/span&gt;&lt;div id="linkdiv"&gt;&lt;p&gt;&lt;a href="coffee.html" id="link1" onClick="changeHeader(2)"&gt;Coffee tables&lt;/a&gt;&lt;/p&gt;&lt;p&gt;
  &lt;a href="side.html" id="link2" onClick="changeHeader(3)"&gt;Side tables&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;a href="stand.html" id="link3" onClick="changeHeader(4)"&gt;Stand tables&lt;/a&gt;&lt;/p&gt;&lt;p&gt;
  &lt;a href="dinner.html" id="link4" onClick="changeHeader(5)"&gt;Dinner tables&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;a href="sp.html" id="link5" onClick="changeHeader(6)"&gt;Stools/Pedestals&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;&lt;/i&gt;&lt;/td&gt;
      &lt;td width="4%" id="galleriesnav"&gt;&lt;a href="galleries.html" onClick="changeClass(2)"&gt;Galleries&lt;/a&gt;&lt;/td&gt;
      &lt;td width="4%" id="pressnav"&gt;&lt;a href="press.html" onClick="changeClass(3)"&gt;Press&lt;/a&gt;&lt;/td&gt;
      &lt;td width="4%" id="factsnav"&gt;&lt;a href="facts.html" onClick="changeClass(4)"&gt;Facts&lt;/a&gt;&lt;/td&gt;
      &lt;td width="4%" id="contactnav"&gt;&lt;a href="contact.php" onClick="changeClass(5)"&gt;Contact&lt;/a&gt;&lt;/td&gt;
      &lt;td width="10%"&gt;&lt;a href="http://www.carlson.se" target="_new"&gt;About artist Carlson&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;    
   &lt;/table&gt;
  </code></pre>
  
  <p>The relevant CSS for <code>index_top</code>:</p>
  
  <pre><code>#linkdiv
  {
      position:absolute;
      visibility:hidden;
      left:502px;
      width:100px;
      height:130px;
      background-color:#FFF;
      border-style:solid;
      border-color:black;
      border-width:2px;
      font-style:normal;
  
  }
  
  #header
  {
      display:inline-block;
      text-align:center;
      width:100px;
  }
  
  
  
  #link1, #link2, #link3, #link4, #link5, #link6
  {
      color:#000;
      text-decoration:none;
      width:100%;
      display:block;
      outline:0;
  }
  
  #link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover, #link6:hover
  {
      width:100%;
      color:#FFF;
      font-weight:bold;
  }
  
  #mainlink:hover #linkdiv
  {
      visibility:visible;
  }
  </code></pre>
  
  <p>Aaaaand the JavaScript:</p>
  
  <pre><code>function changeClass(Index)
  {
      var ids = new Array("null","homenav","galleriesnav","pressnav","factsnav","contactnav");
      var color = new Array("null","#c9a900","#4814a9","#71a28a","#ac27a9","#998f86");
      var i=1;
      var length = ids.length;
      while (i&lt;length)
      {
          document.getElementById(ids[i]).style.backgroundColor = '#FFF';
          document.getElementById(ids[i]).className = "blacklink";
          document.getElementById(ids[Index]).style.backgroundColor =color[Index];
          document.getElementById(ids[Index]).className = "whitelink";
          i++;
      }
  
  }
  
  function changeHeader(HeadIndex)
  {
      var headers = new Array("null","Select page","Coffee tables","Side tables","Stand tables","Dinner tables","Stools","Pedestals");
      var colors = new Array("null","#f32837","#0085cf","#00aa86","#c99900","c42695","#617f90");
      document.getElementById("header").innerHTML = headers[HeadIndex];
      if (HeadIndex &gt; 1)
      {
          document.getElementById("header").style.fontWeight = "bold";
          document.getElementById("header").style.color = "#FFF";
          document.getElementById("header").style.backgroundColor = colors[HeadIndex];
          document.getElementById("header").style.fontStyle = "normal";
      }
  
  }
  </code></pre>
  
  <p>So, my problem here (sorry for the huge amount of code), is that when you try to hover over the "select page" text, the hidden <code>div</code> is being displayed... but under the main frame. Thus, it's impossible to press the links. How can I display the <code>div</code> OVER the main frame so it's clickable? Is it possible even?</p>