/    Sign up×
Community /Pin to ProfileBookmark

problem with onmouseout and tables

Copy linkTweet thisAlerts:
Oct 15.2005

I am writing a website with a drop-down menu and I have the drop-down as a table within a cell of another larger table. I have tried putting the onmouseout event handler in the table tag as well as the cell tag, but any way I try the event executes whenever the mouse is between cells. So before I reach the second option on the menu it disappears.

Does anybody know of any way to fix this so I can keep the nested table and the desired effect. I wanted the table so I could change the colour of each cell the mouse was over.

I think this explanation was a bit long winded, but here’s the code I’m currently using. Any suggestions?

[code=html]

<table id=”menu” class=”menu” style=”position:absolute;z-index:2;left:140;top:100;” width=450 cellpadding=0 cellspacing=0 border=0>
<tr>
<td id=”menu0″ width=150 onMouseOver=”menuchange(0)”>
<b><font face=”Century Gothic”>MRC Math</font></b>
</td>

<td id=”menu1″ width=150 onMouseOver=”menuchange(1);”>
<b><font face=”Century Gothic”>Sports</font></b>
</td>

<td id=”menu2″ width=150 onMouseOver=”menuchange(2);”>
<b><font face=”Century Gothic”>Other</font></b>
</td>
</tr>

<tr>
<td id=”0″ style=”visibility:hidden”>

</td>

<td id=”1″ style=”visibility:hidden” onMouseOut=”menuout(1)” bgcolor=”orange”>
<table width=100% style=”border-width:1;border-color:’black’;border-style:solid;”><tr><td><font size=3 face=”Century Gothic”>Sports Focus</td></tr><tr><td>
KSAFA</td></tr><tr><td>
JFF</font></td></tr></table>
</td>

<td id=”2″ style=”visibility:hidden”>

</td>
</table>

[/code]

Thanks much

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@UltimaterOct 16.2005 — Maybe something like this?
<i>
</i>&lt;style type="text/css"&gt;
ul,li{list-style-type:none;padding:0;margin:0;border:0;}
table{border:0;padding:0;margin:0;}
tr,td{padding:0;margin:0;border:0;vertical-align:top;}

ul li{
background-color:orange;
display:none;
vertical-align:top;
}

ul li.menucata{
font-family: Century Gothic, Arial, sans-serif;
font-weight:bold;
width:150px;
background-color:green;
display:block;
vertical-align:top;
}


&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function menuchange(n){
var els=document.getElementById("m"+n).getElementsByTagName("li")
for(var i=1,l=els.length;i&lt;l;i++){
els[i].style.display=(els[i].style.display!="block")?"block":"none";
}
}
&lt;/script&gt;


&lt;table cellpadding="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td&gt;

&lt;ul&gt;
&lt;li class="menucata"&gt;MRC Math&lt;/li&gt;
&lt;/ul&gt;

&lt;/td&gt;&lt;td&gt;

&lt;ul id="m1"&gt;
&lt;li class="menucata" onmouseover="menuchange(1)"&gt;Sports&lt;/li&gt;
&lt;li&gt;Sports Focus&lt;/li&gt;
&lt;li&gt;KSAFA&lt;/li&gt;
&lt;li&gt;JKK&lt;/li&gt;
&lt;/ul&gt;

&lt;/td&gt;&lt;td&gt;

&lt;ul&gt;
&lt;li class="menucata"&gt;Other&lt;/li&gt;
&lt;/ul&gt;

&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

×

Success!

Help @DJRobThaMan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...