JavaScript query

[rah111]

Hi all.

I have copied the following source code from the web but am struggling to understand it.

<SCRIPT LANGUAGE=Javascript>
<!--
function inCell(cell, newcolor) {
if (!cell.contains(event.fromElement)) {
cell.bgColor = newcolor;
}
}
function outCell(cell, newcolor) {
if (!cell.contains(event.toElement)) {
cell.bgColor = newcolor;
}
}
//-->
</SCRIPT>

The calls are made from <td ... onmouseover="inCell(this,"red")"> and <td ... onmouseout="inCell(this,"blue"), which I understand although I can't find the keyword "this" in any of the Javascript documentation. The ! symbol in each function is documented as meaning "not", which is fine.

What is .contains()? There is no reference to it in the rest of the source code. Similarly, there is no reference either to event or to .fromElement or .toElement. What are event, fromElement and toElement?

Is everything within the "if" JavaScript? Or is there CSS there?

I really can't follow this. I hope someone can explain it all.

Thanks a lot.

Russell.

[mordred]

"this" is a special operator which refers to the current object you operate on in javascript. In your example, "this" stands for the <td> element, or rather it's representation as a DOM object in javascript.

event is an IE-only object that is generated when an event is fired. It also has properties and methods that get used in your example. fromElement is a reference to the element from which the event was initiated (with onmouseout, the element/table cell you just have left), and toElement points to the element that receives the event (in your case, the <td> you move the mouse on).
The use of it is that onmouseout is also fired when you are still in your <td> but move the mouse on, say a <span> element or whatever. The code checks with contains() if the table cell you are in does not contain that element and if so, changes the table cell's background color.

All in all, this code is heavy IE centric and will fail in any other browser than IE4+.

These URLs might help you:

this

http://devedge.netscape.com/docs/manuals/js/core/jsref15/ops.html#1043482

event.fromElement

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/fromelement.asp

event.toElement

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/toelement.asp

contains()

http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/contains.asp

If you have still questions or if my explanation was to cryptic, feel free to ask.

[rah111]

onMouseover in tables

Thanks again mordred, both for your clear explanations and the follow-up links.

One question:

Would it be too difficult a task to simulate the IE-specific code so that I can get the onMouseover effect happening with borderless tables that will work on all browsers?

Russell.