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=="DHTM L") {
topic="DHTML";
chapter="11-15";
assignment="6-8";
}

var topicName=docum ent.getElementB yId("topic");
var newTopic=docume nt.createTextNo de(topic);
topicName.repla ceChild(newTopi c, topicName.child Nodes[0]);

var chapterName=doc ument.getElemen tById("chapter" );
var newChapter=docu ment.createText Node(chapter);
chapterName.rep laceChild(newCh apter, chapterName.chi ldNodes[0]);

var assignmentName= document.getEle mentById("assig nment");
var newAssignment=d ocument.createT extNode(assignm ent);
assignmentName. replaceChild(ne wAssignment, assignmentName. childNodes[0]);
}

....which is called in the following:

<table>
<tr>
<a href="#" onMouseOver='di splay("HTML")'> <td>HTML</td></a>
<a href="#" onMouseOver='di splay("DHTML")' ><td>DHTML</td></a>
</tr>
</table>
<ul>
<li><h4>Topic : </h4><span id="topic">HTM L Review</span></li>
<li><h4>Chapter s: </h4><span id="chapter">1-6</span></li>
<li><h4>Assignm ents: </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]

Re: Rollovers in Mozilla

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

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

<td><a href="#" onMouseOver='di splay("HTML")'> HTML</a></td>
<td><a href="#" onMouseOver='di splay("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]

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=="DHTM L") {
> topic="DHTML";
> chapter="11-15";
> assignment="6-8";
> }
>
> var topicName=docum ent.getElementB yId("topic");
> var newTopic=docume nt.createTextNo de(topic);
> topicName.repla ceChild(newTopi c, topicName.child Nodes[0]);
>
> var chapterName=doc ument.getElemen tById("chapter" );
> var newChapter=docu ment.createText Node(chapter);
> chapterName.rep laceChild(newCh apter, chapterName.chi ldNodes[0]);
>
> var assignmentName= document.getEle mentById("assig nment");
> var newAssignment=d ocument.createT extNode(assignm ent);
> assignmentName. replaceChild(ne wAssignment,
> 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='di splay("HTML")'> <td>HTML</td></a>
> <a href="#" onMouseOver='di splay("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='di splay("HTML")'> HTML</a></td>
<td><a href="#" onMouseOver='di splay("DHTML")' >DHTML</a></td>[color=blue]
> </tr>
> </table>
> <ul>
> <li><h4>Topic : </h4><span id="topic">HTM L Review</span></li>
> <li><h4>Chapter s: </h4><span id="chapter">1-6</span></li>
> <li><h4>Assignm ents: </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/