3rd state of 3 state buttons script not working

[hivemind]

Hi Guys,

I'm trying to get my website http://www.apps-limited.co.uk to have working 3 state mouse buttons which are selectable by tab, accesskeys, etc...

For some reason the 3rd state shows fine in Safari (3.22), not at all in IE(All - IE Tester) or FF(3.0.5), and god only knows what's happening in Opera (9.63)

The script is called rollover.js and is an edited version of a Lynda.com script (It is not a DD script, but I was hoping for help with it):

function rolloverInit() {
        for (var i=0; i<document.images.length; i++) {
            if (document.images[i].parentNode.parentNode.parentNode.parentNode.id == "nav-menu"){
                    setupRollover(document.images[i]);
            }
        }
    }

function setupRollover(thisImage) {
    thisImage.outImage = new Image();
    thisImage.outImage.src = thisImage.src;
    thisImage.onmouseout = rollOut;

    thisImage.overImage = new Image();
    thisImage.overImage.src = "http://p2p.wrox.com/images/" + thisImage.id + "_on.jpg";
    thisImage.onmouseover = rollOver;

    thisImage.clickImage = new Image();
    thisImage.clickImage.src = "http://p2p.wrox.com/images/" + thisImage.id + "_click.jpg";
    thisImage.onmousedown = rollClick;    

    thisImage.parentNode.childImg = thisImage;
    thisImage.parentNode.onblur = rollOutChild;
    thisImage.parentNode.onfocus = rollOverChild;
}

function rollOut() {
    this.src = this.outImage.src;
}

function rollOver() {
    this.src = this.overImage.src;
    return false;
}

function rollClick() {
    this.src = this.clickImage.src;
}

function rollOutChild() {
    this.childImg.src = this.childImg.outImage.src;
}

function rollOverChild() {
    this.childImg.src = this.childImg.overImage.src;
}

window.onload = rolloverInit;

Can anyone help?

Thanks in advance


Jim

PS I posted this on sitepoint and got very little response (no slight on sitepoint there...they're very nice people). The only response I got was this:

The focus event follows click, so the click image is overwritten. It's better to apply all event handlers to the link, and assign the same handler to mouseover and focus. The same for mouseout and blur.

Is this true: I didn't think the element would gain focus until it was moused-over again?

[hivemind]

Primary Problem turned out to be this block...

    thisImage.parentNode.childImg = thisImage;
    thisImage.parentNode.onblur = rollOutChild;
    thisImage.parentNode.onfocus = rollOverChild;

Bizarrely, this was the solution:

    var theParent = thisImage.parentNode;
    theParent.childImg = thisImage; // this also might not be legit in all browsers
    theParent.onblur = rollOutChild;
    theParent.onfocus = rollOverChild;
    theParent.onkeydown = tabClickChild;

Problem was resolved on this thread:

If anyone can shed better light on why the above are inherently different from each other, I'd be interested to know...