473,729 Members | 2,328 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

onMouseOver/onMouseOut not working

Hi all,

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:
<HTML>
<HEAD>
<style type="text/css">
td.col1
{
background-color:Silver;
color:Black;
}

td.col3
{
background-color:Aqua;
color:Blue;
}
</style>

<script language="javas cript">
function changeCellConte nts(cell, toPic)
{
if (toPic)
{
cell.innerHtml = "<img src=\"images/myimage.jpg\">" ;
}
else
{
cell.innerText = cell.CellText;
}
}
</script>

</HEAD>
<body>
<form name="TableDBFo rm">
<table bordercolor="Wh ite" border="0" cellspacing="1" width="100%">
<tr>
<td Class="col1" CellText="cell 1"
onMouseOver="ch angeCellContent s(this, true)"
onMouseOut="cha ngeCellContents (this, false)">cell 1</td>
<td Class="col1" CellText="cell 2"
onMouseOver="ch angeCellContent s(this, true)"
onMouseOut="cha ngeCellContents (this, false)">cell 2</td>
</tr>
</table>
</form>
</body>
</HTML>
Unfortunately, it doesn't seem to work. Any reason why?

Jul 23 '05 #1
12 12285
Lee
Epetruk said:
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?


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;
}

Jul 23 '05 #2
Lee wrote:
[...]
On the other hand, "innerText" is correct, but doesn't exist
in all browsers. It's better to use innerHTML in both cases.
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.
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.


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
Jul 23 '05 #3
On Sun, 13 Feb 2005 02:30:29 -0000 Epetruk wrote:
Hi all, 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:


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' )>
Jul 23 '05 #4
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.backgro undImage = "url(' + cellImgArray[x.id] + '")';

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

Nick

Jul 23 '05 #5
Lee
RobG said:

Lee wrote:
[...]
On the other hand, "innerText" is correct, but doesn't exist
in all browsers. It's better to use innerHTML in both cases.
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.
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.


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.


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


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.

Jul 23 '05 #6
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.backgro undImage = "url(' + cellImgArray[x.id] + '")';

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

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

Jul 23 '05 #8
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.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
Jul 23 '05 #9
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.

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


<!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...

http://www.htmldog.com/articles/suckerfish/
http://www.google.com/search?hl=en&q...t+explorer+htc

Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
3967
by: Eqbal Z | last post by:
Hi, I have the following code, and onmouseover/onmouseout etc. does not work in netscape 4.7. <div id="divUpControl"><a href="javascript:void(0);" onMouseOver="PerformScroll(-7);" onMouseOut="CeaseScroll();" class="nounderline"></a><a href="javascript:void(0);" onMouseOver="PerformScroll(7);" onMouseOut="CeaseScroll();" class="nounderline"></a></div>
4
13954
by: laurie | last post by:
Hi. I have a DIV section that has many thumbnail images inside it. I have a DIV so all images can fit in a row and the horizontal scroll bar is used to move the thumbnails from left to right. Does anyone know any code to have the DIV scroll from left to right when I use an onmouseover on two images either side of the DIV? Thanks Laurie
6
3308
by: bzi999 | last post by:
Hi! I'm having a strange problem with javascript and maybe someone herecan help me. Look at this simple html snippet: <div id="menu"> <img src="images/m1.gif" usemap='#map' border=0> <MAP name="map"> <AREA HREF="link1.htm" COORDS="26,0,66,14" onMouseOver="showit('option 1')" onMouseOut="showit('')">
3
7450
by: Rob Roberts | last post by:
I'm using .NET 2.0 and C# on a web site, and I'm trying to use the onmouseover and onmouseout events to do a rollover effect on an asp.net button. I've tried manually adding the events to the asp:button tag. The events I added look like this: onmouseover="this.className='btnNormal'" onmouseout="this.className='btnOver'" This works fine, with the rollover appearing as it should. But when I build the project in VS2005, I get a...
2
2725
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore. Replicate-Problem: Scrolldown the textbox and put the mouse over a row.
7
2798
by: MrCode2k | last post by:
Hello, Trying to do: I just want a table that I can scroll and that has fixed headers. Problem: I got it to work but when I added the onmouseover event it didn't work anymore. Replicate-Problem: Scrolldown the textbox and put the mouse over a row.
3
3616
by: oopaevah | last post by:
I have written some dom code to create a list of divs, each with it's own id. I want to set the onmouseover and onmouseout events to highlight the div when the mouse is over it. However I cannot use the method below because oDiv.id is always set to the last div I create - so the last div is highlighted regardless of which div I am onmouseover This must be a common issue, how do I go about fixing it? I can have a separate function which...
2
2645
by: Daz | last post by:
Hi everyone. I think my problem is a simple one, but I am completely baffled as to how to pull it off. I have a piece of code like so... document.write( "<img id=\"slideshow_toggle\" src=\"img/stop_slideshow.png\" " + "onMouseOver=\"src='./img/stop_slideshow_hover.png'\" " + "onMouseOut=\"src='./img/stop_slideshow.png'\" "
4
3162
by: bgold12 | last post by:
Hey, I have kind of a weird problem. I have a span that I'm intentionally overflowing a table cell (<td>), so that it stretches over the table cells to the right of the parent table cell. I want the mouseover event to occur for the table cells that lie underneath the overflowed span, but every time i put the mouse on the span the mouseover event for the parent table cell is called. Any suggestions? Thanks.
0
8921
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9427
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9148
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8151
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6022
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4796
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3238
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2683
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2165
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.