Mouseover Div Displays at Pageload - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Mouseover Div Displays at Pageload

It should be hidden

rmplmn

5:04 pm on May 23, 2005 (gmt 0)

10+ Year Member

I am trying to unhide a div on a td mouseover. The mouseover itself is working fine but the div is displaying on pageload. Subsequent mouseouts make it disappear but I can't seem to get it to be hidden when the page is loaded. What am I doing wrong?

<style>
.item {border-bottom:1px solid #ffffff;font-size:10px;}
#menu1 {visible:hidden;position:absolute;top:100px;left:50px;width:120px;}
#menu2 {visible:hidden;position:absolute;top:10px;left:250px;width:120px;}
</style>

<body>
<table><tr>
<td width="50%" onmouseover="document.getElementById('menu1').style.visibility = 'visible';" onmouseout="document.getElementById('menu1').style.visibility = 'hidden';"><img src="images/image1.jpg" alt="" width="100" height="40" border="0"></td>
<td width="50%" onmouseover="document.getElementById('menu2').style.visibility = 'visible';" onmouseout="document.getElementById('menu2').style.visibility = 'hidden';"><img src="images/image2.jpg" alt="" width="80" height="35" border="0"></td>
</tr>
</table>
<div id="menu1">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
<div id="menu2">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</body>

dcrombie

7:05 pm on May 23, 2005 (gmt 0)

Try "display: none" or "visibility: hidden" instead of "visibile:hidden" ;)

rmplmn

8:28 pm on May 23, 2005 (gmt 0)

10+ Year Member

DOPE!

Thanks.