onMouseOver/onMouseOut not working

**Lee** · Jul 23 '05, 05:45 PM

Re: onMouseOver/onMouseOut not working

Epetruk said:
[color=blue]
> function changeCellConte nts(cell, toPic)
> {
> if (toPic)
> {
> cell.innerHtml = "<img src=\"images/myimage.jpg\">" ;
> }
> else
> {
> cell.innerText = cell.CellText;
> }
> }
> </script>
>Unfortunatel y, it doesn't seem to work. Any reason why?[/color]

There is no attribute named "innerHtml" . It's "innerHTML" .

On the other hand, "innerText" is correct, but doesn't exist
in all browsers. It's better to use innerHTML in both cases.

You also can't expect to be able to access custom HTML
attributes like "CellText" in all browsers, so it would be
better to store the current innerHTML value before you change
it.

if (toPic)
{
cell.CellText = cell.innerHTML;
cell.innerHTML = "<img src=\"images/myimage.jpg\">" ;
}
else
{
cell.innerHTML = cell.CellText;
}

**RobG** · Jul 23 '05, 05:45 PM

Re: onMouseOver/onMouseOut not working

Lee wrote:
[...][color=blue]
> On the other hand, "innerText" is correct, but doesn't exist
> in all browsers. It's better to use innerHTML in both cases.[/color]

Whilst innerHTML is widely supported, there are likely to be some
browsers that don't support it. Also, it isn't part of the W3C
HTML specification (and is unlikely to ever be).

Therefore it's worth feature testing before attempting to use it
and provide an alternative if it doesn't work.
[color=blue]
> You also can't expect to be able to access custom HTML
> attributes like "CellText" in all browsers, so it would be
> better to store the current innerHTML value before you change
> it.[/color]

Good point about the custom attribute, but if you store the
current contents of the cell, the onmouseout will pick up the
image and re-display it. The contents have to be specified
independently of onmouseover/out.

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.

I tried putting a mouseover on the cell and mouseout on the
table. When the mouse is over a cell, the last mouseover cell is
restored and the new cell has the image put in it. When going
out of the table, a mouseout just restores the cell.

You can put the cell text and images in an array, that way you
can call a different image or text for each cell. The script
below uses DOM with feature testing and offers an innerHTML
method if the DOM methods aren't supported. I have used the cell
id to define the text and image to swap, but some other method
could be used.

The OP should remember that the pages should stay fully
functional even if JavaScript is disabled.

<html><head><ti tle>play</title>
<style type="text/css">
td.col1 {background-color:Silver; color:Black;}
td.col3 {background-color:Aqua; color:Blue;}
</style>
<script language="javas cript">
var lastMouseOverCe ll;
var cellTxtArray = ['cell 1','cell 2']
var cellImgArray = ['a.jpg','b.gif']

function changeCellConte nts(cell,evt) {
var e = evt || window.event;
if (cell.nodeName == 'TABLE' && e.type == 'mouseover') {
if (e.stopPropagat ion) e.stopPropagati on();
e.cancelBubble = true;
return;
}

if (lastMouseOverC ell)
restore(lastMou seOverCell);
if(cell.nodeNam e.toLowerCase() == 'td') {
lastMouseOverCe ll = cell;
insertImage(cel l);
} else {
lastMouseOverCe ll = '';
}

if (e.stopPropagat ion) e.stopPropagati on();
e.cancelBubble = true;
}

function delContents(x) {
if(x.firstChild ) {
while (x.firstChild) {
x.removeChild(x .firstChild);
}
} else if (x.innerHTML) {
x.innerHTML = '';
}
}

function restore(x) {
delContents(x);
if (x.appendChild) {
oTxt = document.create TextNode(cellTx tArray[x.id]);
x.appendChild(o Txt);
} else if (x.innerHTML) {
x.innerHTML = cellTxtArray[x.id];
}
}

function insertImage(x) {
delContents(x)
if (x.appendChild) {
var oImg = document.create Element('img');
oImg.src = cellImgArray[x.id];
x.appendChild(o Img);
} else if (x.innerHTML) {
x.innerHTML = '<img src="'+cellImgA rray[x.id]+'"'
+ ' alt="goofy image">';
}
}
</script>

</head>
<body>
<table bordercolor="Wh ite" border="0"
cellspacing="1" width="100%" onmouseout="
changeCellConte nts(this,event) ;
">
<tr>
<td Class="col1" id="0" onmouseover="
changeCellConte nts(this,event) ;
">cell 1</td>
<td Class="col1" id="1" onmouseover="
changeCellConte nts(this,event) ;
">cell 2</td>
</tr>
<tr>
<td Class="col1" id="0" onmouseover="
changeCellConte nts(this,event) ;
">cell 1</td>
<td Class="col1" id="1" onmouseover="
changeCellConte nts(this,event) ;
">cell 2</td>
</tr>
</table>
</body>
</html>

--
Rob

**Richard** · Jul 23 '05, 05:45 PM

Re: onMouseOver/onMouseOut not working

On Sun, 13 Feb 2005 02:30:29 -0000 Epetruk wrote:
[color=blue]
> Hi all,[/color]
[color=blue]
> I want a page where the contents of a table cell are replaced with an
> image
> when the mouse moves over the cell, and the text is restored when the
> mouse
> moves out. Here's the html for the page:[/color]

I think you'd be better off using a method where a divsion is hidden or
visible.
This is what I use.

var kid = "FirstOn"
function ShowInfo(DivId)
{
document.getEle mentById(kid).s tyle.display = 'none';
document.getEle mentById(DivId) .style.display = 'block';
kid = DivId;
}

<div id="FirstOn" style="display: block;">
blah blah blah blah
</div>

<div id="ShowMe" style="display: none;">
<img src="name.jpg">

<tr><td onmouseover="Sh owInfo('ShowMe' ) onmouseout="Sho wInfo('FirstOn' )>

**Nick Robins** · Jul 23 '05, 05:46 PM

Re: onMouseOver/onMouseOut not working

RobG wrote:[color=blue]
> 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.
>[/color]
rather than inserting and removing an image element, it might be better
to use css,
eg:
x.style.backgro undImage = "url(' + cellImgArray[x.id] + '")';

and:
x.style.backgro undImage = "";

Nick

**Lee** · Jul 23 '05, 05:46 PM

Re: onMouseOver/onMouseOut not working

RobG said:[color=blue]
>
>Lee wrote:
>[...][color=green]
>> On the other hand, "innerText" is correct, but doesn't exist
>> in all browsers. It's better to use innerHTML in both cases.[/color]
>
> Whilst innerHTML is widely supported, there are likely to be some
> browsers that don't support it. Also, it isn't part of the W3C
> HTML specification (and is unlikely to ever be).
>
> Therefore it's worth feature testing before attempting to use it
> and provide an alternative if it doesn't work.
>[color=green]
>> You also can't expect to be able to access custom HTML
>> attributes like "CellText" in all browsers, so it would be
>> better to store the current innerHTML value before you change
>> it.[/color]
>
> Good point about the custom attribute, but if you store the
> current contents of the cell, the onmouseout will pick up the
> image and re-display it. The contents have to be specified
> independently of onmouseover/out.[/color]

No it won't. The only value to ever be stored is the text.
[color=blue]
> 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.[/color]

Whether or not this problem is obvious depends on the size of the
image. Another problem is that the cells resize, possibly moving
the current cell out from under the pointer.

There are other problems with the idea, but I thought the OP
should be allowed to encounter them stepwise.

**RobG** · Jul 23 '05, 05:46 PM

Re: onMouseOver/onMouseOut not working

Nick Robins wrote:[color=blue]
> RobG wrote:
>[color=green]
>> 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.
>>[/color]
>
> rather than inserting and removing an image element, it might be better
> to use css,
> eg:
> x.style.backgro undImage = "url(' + cellImgArray[x.id] + '")';
>
> and:
> x.style.backgro undImage = "";
>
> Nick
>[/color]

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="to ggle(this);"><i mg src="1.gif"
alt="image" style="display: none"><span>cel l 1</span>
</td>
</tr></table>
</body></html>

--
Rob

**Nick Robins** · Jul 23 '05, 05:47 PM

Re: onMouseOver/onMouseOut not working

RobG wrote:[color=blue]
> 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.
>[/color]
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(tableC ell) {
tableCell.style .backgroundImag e = "url(path/to/image.jpg)";
tableCell.first Child.style.dis play = "none";
}
function delImage(tableC ell) {
tableCell.style .backgroundImag e = "";
tableCell.first Child.style.dis play = "inline";
}
</script>

<table><tr>
<td onmouseover="ad dImage(this)"
onmouseout="del Image(this)"><s pan>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

**RobG** · Jul 23 '05, 05:48 PM

Re: onMouseOver/onMouseOut not working

Nick Robins wrote:[color=blue]
> RobG wrote:
>[color=green]
>> 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.
>>[/color]
>
> 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.[/color]

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.getEle mentById('msgCe l');
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.innerHTM L = msgTxt.join('') ;
evtCnt++;
}

function addImage(tableC ell,evt) {
tableCell.style .backgroundImag e = "url(1.gif) ";
tableCell.first Child.style.dis play = "none";

var e = evt || window.event;
var c = e.target || e.srcElement;
writeMsg(e.type ,c.nodeName,tab leCell.id);
}
function delImage(tableC ell,evt) {
tableCell.style .backgroundImag e = "";
tableCell.first Child.style.dis play = "";

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

function addImage1(table Cell,evt) {
tableCell.child Nodes[0].style.display = "";
tableCell.child Nodes[1].style.display = "none";

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

function delImage1(table Cell,evt) {
tableCell.child Nodes[0].style.display = "none";
tableCell.child Nodes[1].style.display = "";

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

}
</script>

<table border="1">
<tr>
<td id="left" onmouseover="ad dImage1(this,ev ent)"
onmouseout="del Image1(this,eve nt)"><img
src="1.gif" style="display: none"><span>som e text</span>
</td>
<td id="right" onmouseover="ad dImage(this,eve nt)"
onmouseout="del Image(this,even t)"><span>som e text</span>
</td>
<td style="width: 200px" id="msgCel">
<br><br><br><br ><br><br><br><b r><br><br>
</td>
</tr>
</table>

--
Rob

**RobB** · Jul 23 '05, 05:48 PM

Re: onMouseOver/onMouseOut not working

Nick Robins wrote:[color=blue]
> RobG wrote:[color=green]
> > 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.
> >[/color]
> 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[/color]
*/[color=blue]
> td { width: 100px; height: 100px; }
> </style>
>
> <script type="text/javascript">
> function addImage(tableC ell) {
> tableCell.style .backgroundImag e = "url(path/to/image.jpg)";
> tableCell.first Child.style.dis play = "none";
> }
> function delImage(tableC ell) {
> tableCell.style .backgroundImag e = "";
> tableCell.first Child.style.dis play = "inline";
> }
> </script>
>
> <table><tr>
> <td onmouseover="ad dImage(this)"
> onmouseout="del Image(this)"><s pan>some text</span></td>
> </tr></table>
>
> which works fine on IE, Gecko and Opera but has some quirks in[/color]
Konqueror[color=blue]
> (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[/color]
*/[color=blue]
> 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[/color]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

#foo td {
width: 143px;
height: 64px;
font: normal 16px tahoma;
padding: 3px;
border: 1px #000 solid;
cursor: crosshair;
}
#foo td img {
display: none;
width: 143px;
height: 53px;
border-width: 0;
}
#foo td:hover img, #foo td.sfhover img {
display: inline;
}
#foo td:hover span, #foo td.sfhover span {
display: none;
}

</style>
<script type="text/javascript">

var sfHover = function()
{
var sfEls = document.getEle mentById('foo') .getElementsByT agName('td');
for (var i = 0; i < sfEls.length; i++)
{
sfEls[i].onmouseover = function()
{
this.className += ' sfhover';
}
sfEls[i].onmouseout = function()
{
this.className = this.className. replace(new RegExp(' sfhover\\b'),
'');
}
}
}

if (window.attachE vent)
window.attachEv ent('onload', sfHover);

</script>
</head>
<body>
<table id="foo">
<tbody>
<tr>
<td>
<img src="http://www.google.com/images/art.gif"
alt="some text" />
<span>some text</span>
</td>
<td>feh</td>
</tr>
</tbody>
</table>
</body>
</html>

Been using .htcs for this, but Suckerish makes some compelling
arguments for doing it their way...

Sons of Suckerfish

http://www.htmldog.com/articles/suckerfish/

hover internet explorer htc - Google Search

http://www.google.com/search?hl=en&q=hover+internet+explorer+htc

**RobG** · Jul 23 '05, 05:48 PM

Re: onMouseOver/onMouseOut not working

RobG wrote:
[...][color=blue]
> 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?[/color]

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

--
Rob

**Nick Robins** · Jul 23 '05, 05:48 PM

Re: onMouseOver/onMouseOut not working

RobG wrote:[color=blue]
> 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?
>[/color]
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

**RobG** · Jul 23 '05, 05:49 PM

Re: onMouseOver/onMouseOut not working

Nick Robins wrote:[color=blue]
> RobG wrote:[/color]
[...][color=blue][color=green]
>> 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?
>>[/color]
>
> 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.[/color]

That's the error exactly.

[...][color=blue]
> 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).[/color]

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.ht ml>

--
Rob