TD with a SPAN inside, and their mouse events

Question

paptamas 0 Newbie Poster

14 Years Ago

Helo.

I have a TD element, with a SPAN element inside. I use td-s onmouseover and onmouseout events for a small animation.

My problem is, that, when I move the cursor over the SPAN element,
the onmouseout event for TD element is fired. I want to prevent this. With other words, I want onmouseout fired, just when the cursor is moved outside the td area.
See the code..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>delay</title>
<script language="javascript">
function over(e,id) {
document.getElementById(id).style.backgroundColor = "#333333";
alert('over: '+id);
}

function out(e,id) {
document.getElementById(id).style.backgroundColor = "#cccccc";
alert('out: '+id);
}
</script>
</head>

<body>
<table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CCCCCC" id="td1" onmouseover="over(this.id);" onmouseout="out(this.id);">
<span>Google</span>
</td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
</table>
</body>
</html>

javascript

2 Contributors
3 Replies
197 Views
9 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by Graphix

All 3 Replies

Graphix 68 ---

14 Years Ago

>> I can't say this enough: PUT CODE IN CODE TAGS, THAT IS WHERE THEY ARE MADE FOR!

>> I tested out your code, and to prevent the delay, you need to remove the alerts.

>> Also, your problem is really vague, there is a td, which has a span element within it. When the td is hovered (including the span), the background colour changes. Explain clearly to us all what you want different?

~G

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

paptamas 0 Newbie Poster · Answer 1 · 2010-02-11T22:47:00+00:00

Of course that my main problem wasn't with this code.. I just tried to "reconstruct" the problem.
The alerts are put there, just to show the events.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>delay</title>
<script language="javascript">
function over(e,id) {
document.getElementById(id).style.backgroundColor = "#333333";
alert('over: '+id);
}

function out(e,id) {
document.getElementById(id).style.backgroundColor = "#cccccc";
alert('out: '+id);
}
</script>
</head>

<body>
<table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CCCCCC" id="td1" onmouseover="over(event,this.id);" onmouseout="out(event,this.id);">
<span>Google</span>
</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
</table>
</body>
</html>

I write my code again, because first time it wasn't correct.

So..when I move the mouse over the td: the mouseover is fired - it is ok.
But when I move the mouse over the SPAN, then the mouseout and after that automatically the mouseover (for the TD) is fired again. That's my problem..

Graphix 68 --- · Answer 2 · 2010-02-11T23:55:04+00:00

I tested your code with the following version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>delay</title>
<script language="javascript">
function over(id) {
document.getElementById(id).style.backgroundColor = "#333333";
}

function out(id) {
document.getElementById(id).style.backgroundColor = "#cccccc";
}
</script>
</head>

<body>
<table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CCCCCC" id="td1" onmouseover="over(this.id);" onmouseout="out(this.id);">
<span>Google</span>
</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>
</table>
</body>
</html>

You should use it to check wether it works. This should work properly: when you hover the td, including the span, the td should remain the onmouseover color. If not:

Stop using old browsers and switch to (IE <- although your code works in this browser, dont use it) , FF, GC, Safari or Opera.

If you already have one of the above browsers: please update them to the latest version.

~G

TD with a SPAN inside, and their mouse events

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers