Rollovers in Mozilla

[Aaron]

Hi,

I have the following function...

function display(subject) {
var topic="";
var chapter="";
var assignment="";
if (subject=="HTML") {
topic="HTML";
chapter="1-6";
assignment="1";
}
else if (subject=="DHTML") {
topic="DHTML";
chapter="11-15";
assignment="6-8";
}

var topicName=document.getElementById("topic");
var newTopic=document.createTextNode(topic);
topicName.replaceChild(newTopic, topicName.childNodes[0]);

var chapterName=document.getElementById("chapter");
var newChapter=document.createTextNode(chapter);
chapterName.replaceChild(newChapter, chapterName.childNodes[0]);

var assignmentName=document.getElementById("assignment");
var newAssignment=document.createTextNode(assignment);
assignmentName.replaceChild(newAssignment, assignmentName.childNodes[0]);
}

....which is called in the following:

<table>
<tr>
<a href="#" onMouseOver='display("HTML")'><td>HTML</td></a>
<a href="#" onMouseOver='display("DHTML")'><td>DHTML</td></a>
</tr>
</table>
<ul>
<li><h4>Topic: </h4><span id="topic">HTML Review</span></li>
<li><h4>Chapters: </h4><span id="chapter">1-6</span></li>
<li><h4>Assignments: </h4><span id="assignment">1</span></li>
</ul>

This works great in IE6, but does nothing in Mozilla browsers. Does
anyone see the problem here?

Thanks,
Aaron

 

[Brian Genisio]

<table>
<tr>
<a href="#" onMouseOver='display("HTML")'><td>HTML</td></a>
<a href="#" onMouseOver='display("DHTML")'><td>DHTML</td></a>

Here is your problem... It needs to be changed to:

<td><a href="#" onMouseOver='display("HTML")'>HTML</a></td>
<td><a href="#" onMouseOver='display("DHTML")'>DHTML</a></td>

See, it doesnt make sense to have an anchor tag in a TR tag. Only table
cells may be in a TR tag (TD, or TH).

Why does IE do it? Because they will parse any non-standard HTML code,
even if it doesnt make sense. It creates a world of non-compliance that
annoys a lot of people.

Brian

 

[Martin Honnen]

I have the following function...

function display(subject) {
var topic="";
var chapter="";
var assignment="";
if (subject=="HTML") {
topic="HTML";
chapter="1-6";
assignment="1";
}
else if (subject=="DHTML") {
topic="DHTML";
chapter="11-15";
assignment="6-8";
}

var topicName=document.getElementById("topic");
var newTopic=document.createTextNode(topic);
topicName.replaceChild(newTopic, topicName.childNodes[0]);

var chapterName=document.getElementById("chapter");
var newChapter=document.createTextNode(chapter);
chapterName.replaceChild(newChapter, chapterName.childNodes[0]);

var assignmentName=document.getElementById("assignment");
var newAssignment=document.createTextNode(assignment);
assignmentName.replaceChild(newAssignment,
assignmentName.childNodes[0]);
}

...which is called in the following:

<table>
<tr>
<a href="#" onMouseOver='display("HTML")'><td>HTML</td></a>
<a href="#" onMouseOver='display("DHTML")'><td>DHTML</td></a>

and correct the markup to properly have the <a> elements inside of <td>
elements e.g.

</tr>
</table>
<ul>
<li><h4>Topic: </h4><span id="topic">HTML Review</span></li>
<li><h4>Chapters: </h4><span id="chapter">1-6</span></li>
<li><h4>Assignments: </h4><span id="assignment">1</span></li>
</ul>

This works great in IE6, but does nothing in Mozilla browsers. Does
anyone see the problem here?

then I don't have any problem here with Netscape 7.1, onmouseover the
text nodes are changed.

You might even not use the <a> element at all but directly use
<td onmouseover="..."
instead.