Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2002
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript query

    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.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    "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/man...s.html#1043482

    event.fromElement
    http://msdn.microsoft.com/workshop/a...romelement.asp

    event.toElement
    http://msdn.microsoft.com/workshop/a.../toelement.asp

    contains()
    http://msdn.microsoft.com/workshop/a...s/contains.asp

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

  • #3
    New Coder
    Join Date
    Jun 2002
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •