Question

i’ve made a simple script which will reveal a div (inside another) when hovered on the outer div (does this make sence?)

anyway this is the code.

for (var ost = 1; ost <= 16; ost++) {
        var maelk = String("sovs"+ ost);
        document.getElementById(maelk).addEventListener('mouseover', on, false);
        document.getElementById(maelk).addEventListener('mouseout', off, false);
        }

    function on(e) {
        var t=e.currentTarget.id;
        var g= t.substr(4,5);
        var v="celltext" + g;
        $("#"+v).show();
            //stop(true, false).fadeIn("slow");
    }

    function off(e) {
        var t=e.currentTarget.id;
        var g= t.substr(4,5);
        var v="celltext" + g;

        $("#"+v).hide();
            //stop(true, true).fadeOut("slow");

    }

But this doesn’t work on Internet Explorer. I heard the reason was addEventListener. So i tried editing the code to this:

for (var ost = 1; ost <= 16; ost++) {
        var maelk = String("sovs"+ ost);
        var maelkelement = document.getElementById(maelk);

    if (!maelkelement.addEventListener) {
        maelkelement.attachEvent('mouseover', on, false);
        maelkelement.attachEvent('mouseout', off, false);
    }
    else {
        maelkelement.addEventListener('mouseover', on, false);
        maelkelement.addEventListener('mouseout', off, false);
    }

    function on(e) {
        var t=e.currentTarget.id;
        var g= t.substr(4,5);
        var v="celltext" + g;
        $("#"+v).show();
            //stop(true, false).fadeIn("slow");
    }

    function off(e) {
        var t=e.currentTarget.id;
        var g= t.substr(4,5);
        var v="celltext" + g;

        $("#"+v).hide();
            //stop(true, true).fadeOut("slow");

    }

The only difference is the IF sentence to communicate with IE. This doesn’t work though.

Anybody got any ideas?

Help is much appreciated, and thank you in advance

Regards,
Mathias

Answer 1

The event names are slightly different when you use attachEvent. You’ll need to use 'onmouseover' and 'onmouseout' instead:

if (!maelkelement.addEventListener) {
    maelkelement.attachEvent('onmouseover', on);
    maelkelement.attachEvent('onmouseout', off);
}

See also:

• MDN: element.AddEventListener (section “Legacy Internet Explorer and attachEvent”)
• MSDN: attachEvent method
• MSDN: List of events