Rollovers in Mozilla

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

re: Rollovers in Mozilla

Aaron wrote:
[color=blue]
> <table>
> <tr>
> <a href="#" onMouseOver='display("HTML")'><td>HTML</td></a>
> <a href="#" onMouseOver='display("DHTML")'><td>DHTML</td></a>[/color]

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

re: Rollovers in Mozilla

Aaron wrote:
[color=blue]
> 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]);
> }[/color]

When I stuff that function into a <script> element in the head of a HTML
page and see below
[color=blue]
> ...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>[/color]

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

<td><a href="#" onMouseOver='display("HTML")'>HTML</a></td>
<td><a href="#" onMouseOver='display("DHTML")'>DHTML</a></td>[color=blue]
> </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?[/color]

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.

--

Martin Honnen
http://JavaScript.FAQTs.com/