Hi
I am trying to learn Javascript by creating small projects. I am trying
to create a drop down menu but I am having problems hiding the <div>
when the mouse is no longer on the <div>.
Your help will be appreciated. Please keep it simple.
<script type="text/javascript">
function mouse_over (var1, var2)
{
var left_position = parseInt(document.getElementById(var2).offsetLeft) ;
var top_position =
parseInt(document.getElementById(var2).offsetParen t.offsetTop);
var height_position =
parseInt(document.getElementById(var2).offsetParen t.offsetHeight);
document.getElementById(var1).style.left = left_position;
document.getElementById(var1).style.top = top_position+height_position;
}
**********Problem with this function*******************
function mouse_out (var1, var2)
{
if(event.toElement !=var2 )
{
document.getElementById(var1).style.left = -1000;
document.getElementById(var1).style.top = -1000;
}
}
</script>
<style>
..hide_menu{
position:absolute;
left:-1000px;
top:-1000px;
z-index: 100;
}
</style>
<div id="menu1" class="hide_menu" ><table width="100" border="1"
class="calendar_table" >
<tr>
<td width="100">
first line
</td>
</tr>
<tr>
<td width="100">
second line
</td>
</tr>
<tr>
<td width="100">
third line
</td>
</tr>
</table>
</div>
<table width="300" border="1" bordercolor="#000000" class="drop_headings">
<tr>
<td id="1" width="100" onmouseover="return mouse_over('menu1','1')"
onmouseout="return mouse_out('menu1','1')">one</td>
<td id="2" width="100" onmouseover="return mouse_over('menu2','2')"
onmouseout="return mouse_out('menu2','2')" >two</td>
<td width="100">three</td>
</tr>
</table>
Regards
Bundy
