Handle events from central script

Hello

I try to hanlde events centrally for avoiding the need to write four event
handler attributes to every link. The task is changing the class name of a
link's containing <div> element. After lots of googling I came to this:

if (document.getElementsByTagName) {
    a = document.getElementsByTagName("a");
    for (var i=1; i<a.length; i++) {
        var element = a[i];
        element.onmouseover = function() { element.parentNode.className =
"aktiv"; };
        element.onMouseOut = function() { element.parentNode.className =
"passiv"; };
        element.onFocus = function() { element.parentNode.className =
"aktiv"; };
        element.onBlur = function() { element.parentNode.className =
"passiv"; };
    }
}

The script does not throw any errors neither in IE 6 nor in Firefox, but it
does only change the last element to aktiv, regardless of which element is
hovered or unhovered.

I thought of the a[i] overwriting the element variable in every loop and
also tried calling a[i] directly, and other things such as
var element = document.getElementById(a[i].id);
or an for-in-loop; the result is only the same.

Is my approach totally wrong, or is there anything I am missing?

Thanks for any hint
Markus
Received on Mon Oct 24 02:13:00 2005