PDA

Click to See Complete Forum and Search --> : dynamic menus - blinking

leo_asanov
09-29-2003, 01:31 AM
Every item of dynamic menu represented with 3 independend cells, like
<td id=left><img src="left_image.gif"></td>
<td id=item><a href=#>Menu item</a></td>
<td id=right><img src="right_image.gif"></td>

All three cells fire events when mouse over and mouse out. Onmouseover event handler changes background color and onmouseout handler - restores it.
Nothing specific, isn't it?
But when user leaves "item" cell, for example, and move to left or right image cell "item".onmouseout event occurs, which changes background color back, and riht after that "left".onmouseover is called which change color again. The result is blinking when you move mouse across these three cells.
Is there a way to avoid such blinking?
Gollum
09-29-2003, 04:02 AM
You could put all three cells inside their own table inside a <span></span> and then do the background control in the onmouseover,onmouseout from the span.
leo_asanov
09-29-2003, 08:07 PM
Well, then I run into another problem.
Say we have something like this

<td onmouseout="dosmth()" onmouseover="dosmth()"><table><tr><td class=left></td>
<td><a href=#>LabelM</a></td>
<td class=right></td></tr></table></td>

If you move mouse over left or right cell everything is fine. Only onmouseover is occured.
But if you move it over the center cell where "a href" is placed you get onmouseover,onmouseout and onmouseover again because it leaves "td" before entering "a href".
So have series of onmouseover,onmouseout and blinking as a result again.

With three separate cells I did like this:
<td class=left onmouseover onmouseout></td>
<td><a href=# onmouseover onmouseout>Label</a></td>
<td class=right onmouseover onmouseout></td>

So I moved mouse events on "a href" level.

Is there a similar workaround for version with surrounding table?
tinernet
09-30-2003, 03:03 PM
its much easier to use css for this:

<style type="text/css">
td {
display:block;
background:[color];
[any other details eg fonts etc.]
}

td:hover {
display:block;
background:[mouseovercolor];
[any other details eg fonts etc.]
}
</style>

not only is this easier but it is much more compatible thatn js, as some browsers for disabled users to not support. always provide an alternative when using js. i havent checked this but u shud also stick to HTML 4.02 Strict, and you can validate all ur code at http://validator.w3c.org
leo_asanov
09-30-2003, 06:47 PM
I like the idea, but I could not make it working in IE6
Can you?

Comment about my previous message: even if I eliminate "<a href>" by specifing "onclick" handler it still would not help because there's inner "<td>" which also makes onmouseout for outer "<td>"
tinernet
10-01-2003, 12:38 PM
try this then:

<html>
</head>
<style type="text/css">
a {
[details]
}

a:hover {
background:[color];
}
</style>
</head>
<body>
<a href="#"><td>hello</td></a>
</body>
</html>
leo_asanov
10-01-2003, 06:12 PM
It works only if you leave "<td>"s without surrounding "<table>". And even if you put "a href" outside "<table>" definition it works only for IE. Unfortunatelly, I need a solution for IE5+,NN6+, Opera7 and Mozilla.