Re: onMouseOver/onMouseOut not working

RobG wrote:

But there are greater problems. Once you mouseover the td and
put an image in there, as soon as the cursor goes over the image
it is "out" of the td, so the onmouseout fires and replaces the
image with the text again. I've tried to stop propagation but
have failed, perhaps someone else here has a suggestion.

rather than inserting and removing an image element, it might be better

to use css,
eg:
x.style.backgroundImage = "url(' + cellImgArray[x.id] + '")';

and:
x.style.backgroundImage = "";

Nick

Nick Robins wrote:

RobG wrote:

But there are greater problems. Once you mouseover the td and
put an image in there, as soon as the cursor goes over the image
it is "out" of the td, so the onmouseout fires and replaces the
image with the text again. I've tried to stop propagation but
have failed, perhaps someone else here has a suggestion.


rather than inserting and removing an image element, it might be better
to use css,
eg:
x.style.backgroundImage = "url(' + cellImgArray[x.id] + '")';

and:
x.style.backgroundImage = "";

Nick

Or put both the image and text into the cell and toggle the
display of one or the other using style.display. Lee & I
just followed the OP, I didn't think it through enough.

Regardless, until a solution is proposed for the flicker problem
caused by the mouseover/out, it's not going to be useful. I
think Richard has a good idea - have the mouseover change an
adjoining cell.

<script type="text/javascript">
function toggle(x) {
var kids = x.childNodes;
for (var i=0, len=kids.length; i<len; i++){
if (kids[i].style) {
kids[i].style.display =
(kids[i].style.display == 'none')? '':'none';
}
}
}
</script>
<table><tr>
<td onmouseover="toggle(this);"><img src="1.gif"
alt="image" style="display: none"><span>cell 1</span>
</td>
</tr></table>
</body></html>


--
Rob

RobG wrote:

Regardless, until a solution is proposed for the flicker problem
caused by the mouseover/out, it's not going to be useful. I
think Richard has a good idea - have the mouseover change an
adjoining cell.

That was the main reason I suggested using the style property, the

status of the pointer hasn't changed, there's no new element to alter
things thus the flicker is avoided.

The two alternatives I've found are using scripting:

<style type="text/css">
/* set the td size to stop the td collapsing when content is hidden */
td { width: 100px; height: 100px; }
</style>

<script type="text/javascript">
function addImage(tableCell) {
tableCell.style.backgroundImage = "url(path/to/image.jpg)";
tableCell.firstChild.style.display = "none";
}
function delImage(tableCell) {
tableCell.style.backgroundImage = "";
tableCell.firstChild.style.display = "inline";
}
</script>

<table><tr>
<td onmouseover="addImage(this)"
onmouseout="delImage(this)"><span>some text</span></td>
</tr></table>

which works fine on IE, Gecko and Opera but has some quirks in Konqueror
(the background image isn't always removed).

or using pure CSS:

<style type="text/css">
/* set the td size to stop the td collapsing when content is hidden */
td { width: 100px; height: 100px; }
td img { display: none; }
td:hover img { display: inline; }
td:hover span { display: none; }
</style>

<table><tr>
<td><img src="path/to/image.jpg" width="100" height="100" alt="some
text" /><span>some text</span></td>
</tr></table>

which isn't really an option since IE only supports :hover on anchors
(works fine in Gecko/Opera/KHTML).

Nick

Nick Robins wrote:

RobG wrote:

Regardless, until a solution is proposed for the flicker problem
caused by the mouseover/out, it's not going to be useful. I
think Richard has a good idea - have the mouseover change an
adjoining cell.


That was the main reason I suggested using the style property, the
status of the pointer hasn't changed, there's no new element to alter
things thus the flicker is avoided.

Your method neatly avoids flicker, but so does hiding/showing
the elements without using CSS. Your CSS method is much more
reliable in Firefox however, as discussed below.

An artifact of mouseover/out in Firefox is that the events don't
always fire - rapid mouse movement can prevent them from
happening - however the CSS method does not display this.

Below is a test page that has two cells: the left one just
toggles the display of an image or text, the right hides the
text and uses CSS background image to display the image. Both
avoid flicker.

In the left cell, rapid mouse movement can cause the mouseout
event not to fire. The far right cell keeps a log of the last 10
events, the element that fired them and the cell the event is
registered to so it is easy to see a mouseover on the left cell
immediately followed by a mouseover on the right. The missing
mouseout means the image is still displayed in the left cell.

It also neatly shows the bubbling of events - sometimes the
mouseover is called by an image or span and not the td.
Internally, mouseout/over is being called constantly in the left
cell (it happens in the right cell too if something is
displayed).

Interestingly, in IE both cells behave completely reliably - if
mouseover fires, then mouseout is guaranteed (at least as far as
my testing can determine). Is this a bug with Firefox
mouseover/out events?

Comment?

<style type="text/css">
/* set the td size to stop the td collapsing
when content is hidden */
td { width: 150px; height: 100px; }
</style>

<script type="text/javascript">
var msgTxt = ['<br>','<br>','<br>','<br>','<br>',
'<br>','<br>','<br>','<br>','<br>'];
var evtCnt = 0;

function writeMsg(a,b,c){
var msgCel = document.getElementById('msgCel');
var col = 'red';
col = (c == 'left')? 'red' : 'green';

msgTxt.unshift(a + ' ' + b + ' '
+ '<span style="color: ' + col
+ '; font-weight: bold">' + c + '</span>'
+ ' ' + evtCnt + '<br>');
msgTxt.pop();
msgCel.innerHTML = msgTxt.join('');
evtCnt++;
}

function addImage(tableCell,evt) {
tableCell.style.backgroundImage = "url(1.gif)";
tableCell.firstChild.style.display = "none";

var e = evt || window.event;
var c = e.target || e.srcElement;
writeMsg(e.type,c.nodeName,tableCell.id);
}
function delImage(tableCell,evt) {
tableCell.style.backgroundImage = "";
tableCell.firstChild.style.display = "";

var e = evt || window.event;
var c = e.target || e.srcElement;
writeMsg(e.type,c.nodeName,tableCell.id);
}

function addImage1(tableCell,evt) {
tableCell.childNodes[0].style.display = "";
tableCell.childNodes[1].style.display = "none";

var e = evt || window.event;
var c = e.target || e.srcElement;
writeMsg(e.type,c.nodeName,tableCell.id);
}

function delImage1(tableCell,evt) {
tableCell.childNodes[0].style.display = "none";
tableCell.childNodes[1].style.display = "";

var e = evt || window.event;
var c = e.target || e.srcElement;
writeMsg(e.type,c.nodeName,tableCell.id);

}
</script>

<table border="1">
<tr>
<td id="left" onmouseover="addImage1(this,event)"
onmouseout="delImage1(this,event)"><img
src="1.gif" style="display: none"><span>some text</span>
</td>
<td id="right" onmouseover="addImage(this,event)"
onmouseout="delImage(this,event)"><span>some text</span>
</td>
<td style="width: 200px" id="msgCel">
<br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>




--
Rob

RobG wrote:
[...]

Interestingly, in IE both cells behave completely reliably - if
mouseover fires, then mouseout is guaranteed (at least as far as
my testing can determine). Is this a bug with Firefox
mouseover/out events?

I'll answer my own question: yes - Bug# 264236

--
Rob

RobG wrote:

An artifact of mouseover/out in Firefox is that the events don't
always fire - rapid mouse movement can prevent them from
happening - however the CSS method does not display this.

Below is a test page that has two cells: the left one just
toggles the display of an image or text, the right hides the
text and uses CSS background image to display the image. Both
avoid flicker.

In the left cell, rapid mouse movement can cause the mouseout
event not to fire. The far right cell keeps a log of the last 10
events, the element that fired them and the cell the event is
registered to so it is easy to see a mouseover on the left cell
immediately followed by a mouseover on the right. The missing
mouseout means the image is still displayed in the left cell.

It also neatly shows the bubbling of events - sometimes the
mouseover is called by an image or span and not the td.
Internally, mouseout/over is being called constantly in the left
cell (it happens in the right cell too if something is
displayed).

Interestingly, in IE both cells behave completely reliably - if
mouseover fires, then mouseout is guaranteed (at least as far as
my testing can determine). Is this a bug with Firefox
mouseover/out events?

The only way I could reproduce the mouseout error in Mozilla (I don't

have FF installed atm) was by using rapid movement to move the pointer
out of the browser window, the mouseout won't fire until the pointer is
bought back into the cell and out again.

mouseover IMG left 4
mouseout TD left 3
mouseover TD left 2
mouseout TD right 1
mouseover TD right 0

it appears that when it fails (for me anyway) the last event is always
'mouseover IMG left', mozilla has actually 'failed' (kept the image
after mouseout) on the right cell, but only once, I haven't managed to
reproduce this.

On trying this (moving the pointer across the table and out of the
window rapidly) in IE, it takes longer (ie a noticeable length of time)
to fire the mouseout but it /will/ fire it, even if the IE window no
longer has focus.

/edit
After doing some more testing in mozilla, it seems that if either
'mouseover IMG' or 'mouseover SPAN' appears then the mouseout has
failed (ie I only see these appear on failure) for left and right cells
respectively (the right cell only fails infrequently, but then I can't
consistantly trip the left cell either).

Nick

Nick Robins wrote:

RobG wrote:
[...]
Interestingly, in IE both cells behave completely reliably - if
mouseover fires, then mouseout is guaranteed (at least as far as
my testing can determine). Is this a bug with Firefox
mouseover/out events?


The only way I could reproduce the mouseout error in Mozilla (I don't
have FF installed atm) was by using rapid movement to move the pointer
out of the browser window, the mouseout won't fire until the pointer is
bought back into the cell and out again.

That's the error exactly.

[...]

After doing some more testing in mozilla, it seems that if either
'mouseover IMG' or 'mouseover SPAN' appears then the mouseout has
failed (ie I only see these appear on failure) for left and right cells
respectively (the right cell only fails infrequently, but then I can't
consistantly trip the left cell either).

Interesting that you got it to happen on the right cell also -
it has implications for RobB's suggested solution. Testing on a
slow box (old or very busy) may reveal the same failure. The
inability to reproduce the error on the right cell seems purely
due to the greater efficiency of the method rather than avoiding
the bug.

The mouseover should be the last thing but it (occasionally)
isn't, hence the image lingers when it shouldn't. It is a
reported bug in Mozilla, which I guess means Geko. Any
mouseover/out event pair will produce unpredictable results,
much better to use click if possible.

To better understand event bubbling and some of the differences
between the Mozilla and IE models, read here:

<URL:http://www.quirksmode.org/js/events_order.html>


--
Rob