Entry

How can I use MouseOver/Out Event handlers within nested divs in NN4?

Jan 23rd, 2001 08:05
Ian Grant, Tom King,

With Internet Explorer this is a simple task.  Simply use the 
onmouseover and onmouseout handlers and ask which element triggered the 
event in your handling code:
    function mouseOver() {
        window.status = "mouseover = " + event.srcElement.id;
        return false;
    }
    function mouseOut() {
        window.status = "mouseout = " + event.srcElement.id;
        return false;
    }
    document.onmouseover = mouseOver;
    document.onmouseout = mouseOut;
Unfortunately this isn't as simple with Netscape 4.  First of all, 
you'll have to set up event capturing in most cases identically to 
Explorer.  And then secondly, you'll have to determine which element 
triggered the event by comparing the mouse position (where the event 
was triggered) with the elements positions one-by-one in reversed order 
(to get to the layers in a top down fashion).
    // Cycle through the layers until a match is found, return element
    function whichElement(evt) {
        // testElement is to be used as a DOM shortcut in the following 
code
        var testElement;
        // Get the mouse position where the event was triggered
        var xPos = evt.pageX;
        var yPos = evt.pageY;
        // Ultimately, el will hold the element if it is found
        var el = null;
        // Cycle through the layers, top-down; break if found
        for (var i = document.layers.length - 1; i >= 0; i--) {
            testElement = document.layers[i];
            if ((xPos > testElement.left) && (xPos < testElement.left + 
testElement.clip.width) &&
               ((yPos > testElement.top) && (yPos < testElement.top + 
testElement.clip.height)) {
                el = testElement;
                break;
            }
        }
        return el;
    }
    // Note the differences between IE's version and NN4's version
    function mouseOver(evt) {
        window.status = "mouseover = " + whichElement(evt).id;
        return false;
    }
    function mouseOut(evt) {
        window.status = "mouseout = " + whichElement(evt).id;
        return false;
    }
    // Set up event capturing for onmouseover and onmouseout
    document.onmouseover = mouseOver;
    document.onmouseout = mouseOut;
Note that you have to capture the 'event' object in 'evt' to access it 
in Navigator, unlike Explorer where you can use 'event' anytime you 
like.
There are other methods of doing this, such as using anchors with 
embedded onMouseover and onMouseout handlers, or filtering all events 
in one function (rather than the three I used above).  I'll leave these 
other explanations for another day (if anyone asks 8^)...  By the way, 
you can check the type of event by reading 'event.type' in Explorer, 
and by passing 'event' to a function in Navigator as follows:
    function type(evt) {
        window.status = evt.type;
    }
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = type;
    document.onclick = type;
    document.onmousedown = type;
    // And the list goes on...
Navigator 6 can use the same procedure as Navigator 4, however there 
are other neat tricks that can be done with its new DOM.
I hope this helps you.
Ian Grant
idgrant@pandi.20m.com