Code:
<script type='text/javascript'>  
window.onload = function()
{
  displayToggle('underLayer', 'overLayer');
document.getElementById('directGo').onchange = ddmOnChange;
}
function displayToggle(triggerId, targetId)
{
  var overOut = document.getElementById(triggerId);
  overOut.onmouseover = function() {
    document.getElementById(targetId).style.display = 'block';
  };
  overOut.onmouseout = function() {
    document.getElementById(targetId).style.display = 'none';
  };
}
</script>

<style type='text/css'>
table.overLap td { position: relative; } table.overLap table { position: absolute; z-index:99}
</style>


<script type='text/javascript'>  
var flowTxt = '', Move=true, imgMove=true, mouse=1, speed=1, wait=1000, temp=0, height=30,amount=30;
var circle=new Array(), circle_i=new Array(), startPanel=0, n_panel=0, i=0, j=0, count=1;
circle[0]="<table width='220'><tr height='20'><td width='120'><a href=''>flowLink1</a></td><td width='2'></td><tr></table>";
circle[1]="<table width='220'><tr height='20'><td width='120'><a href=''>flowLinkt2</a></td><td width='2'></td></tr></table>";

function startText() {
  for (i=0; i<circle.length; i++) flowText(i);
  window.setTimeout("scroll()",wait);
}

function scroll() {
  if (mouse && Move) {
    for (i=0;i<circle.length;i++) {
      temp++;
      tmp = document.getElementById('scroll_area'+i).style;
      tmp.top = parseInt(tmp.top)-speed;
      if (parseInt(tmp.top) <= height*(-1)) {
        tmp.top = height*(circle.length-1);
      }
      if (temp>(amount-1)*circle.length) {
        Move=false;
        temp=0;
        window.setTimeout("Move=true;temp=0;imgMove=true;",wait);
      }
    }
  }
  window.setTimeout("scroll()",1);
}

function flowText(i) {
  flowTxt='<div style="left: 0px; width: 220px; position: absolute; top: '+(height*i+1)+'px" id="scroll_area'+i+'">\n';
  flowTxt+=circle[i]+'\n'+'</div>\n';
  document.write(flowTxt);
}
</script>

<table class='overLap' bgcolor='yellow'>

<tr>
<td id='underLayer' width='200'>

<table id='overLayer' style='display:none' bgcolor='yellow'>
<tr height='50'>
<td width='200'> 
overText
</td>
</tr>
</table>

underText
</td>

</tr>

</table>


<div id=scroll_div onmouseover=mouse=0 
style='overFlow: hidden; width: 200px; position: relative; top: 0px; height:20px' 
onmouseout=mouse=1>
<script type='text/javascript'>startText()</script>
</div>
The code above has two javascript function. The one is about overText, and the other is about flowLinks.

After the page is loaded, underText inside a yellow table will be shown, and overText will be not shown. And flowLinks will flow upward per second.

If mouse is on underText inside the yellow box, underText will be not shown and overText will be shown downward.

It will work as I said.


Now I am telling about my problem.

When overText is shown,
flowLinks is shown together.

I like to make flowLinks is not shown under the expanded yellow table when overText is shown.

I hope I can make it work as I want with your help.