Menu
Here’s the situation. I have a one-cell table with some text in it. When you mouse over the cell, the text changes. When you mouse out of the cell, the text changes to something else. Simple stuff.
The problem I’m having is that once you mouse into the cell, the new text to be shown is a hyperlink. Apparently, if you’re inside the cell but over a hyperlink, “onmouseout()” gets called because the browser thinks your mouse has left the table. But really, it’s just hovering on top of a hyperlink inside the table. Follow?
The result of this issue is that you see text flickering back and forth between two different sentences and you can’t read the new text let alone click the hyperlink. I’m sure this has been solved more than once in the past but I haven’t been able to conjure up the right search phrase to describe this problem. Please help…
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Test</title>
<script type=”text/javascript” language=”javascript”>
function changeText()
{
document.getElementById(“myText”).innerHTML = ‘<a href=”link.html”>A hidden link! Click me!</a>’;
}
function restoreText()
{
document.getElementById(“myText”).innerHTML = “Shh! It’s a secret!”;
}
</script>
</head>
<body>
<table bgcolor=”red” width=”300″ align=”center”>
<tr>
<td align=”center” onmouseover=”changeText()” onmouseout=”restoreText()”>
<span id=”myText”>Mouse over me!</span>
</td>
</tr>
</table>
</body>
</html>