How to refer to current dom element in array for changing activity via the listener

Question

Currently, I'm looping through all my images and making their onmouseover/onmouseout events change their image with a for-loop.

 var arrows = document.getElementsByClassName('arrow');

 for (var i = 0; i < arrows.length; i++) {
     arrows[i].onmouseover = arrows[i] + ".src = 'images/downarrow_hover.gif';";
     arrows[i].onmouseout = arrows[i] + ".src = 'images/downarrow.gif';";
 }

It's not working, am I doing this right?

Answer 1

You have to assign functions to onmouseover and onmouseout.

var arrows = document.getElementsByClassName('arrow');

for (var i = 0; i < arrows.length; i++) {
    arrows[i].onmouseover = function () {
        this.src = 'images/downarrow_hover.gif';
    };

    arrows[i].onmouseover = function () {
        this.src = 'images/downarrow.gif';
    };

For what it's worth and if you can afford to, you should look into jQuery which makes it a breeze to do a such thing:

$('.arrow').hover(
    function () { $(this).attr('src', 'images/downarrow_hover.gif'); },
    function () { $(this).attr('src', 'images/downarrow.gif'); });