title: addEventListener that onmouseover changes the src of an html img object
body: <p>I have this function that puts my objects where I want them to be, according to the array they are placed.</p>
  
  <p>If they are in players[0] they go somewhere, if they are in players[1] they go eslsewhere. X and Y are just for ilustration purpose, they actualy are something like 600px for example, and all different.</p>
  
  <p>This funstion also receives a flag by parameter, which tells the function if the src continues the same or if it is set to another src.
  Everything is working.</p>
  
  <pre><code>function putHands(flag){
    if(flag == true) show= true;
    else show = false;
    for(var i = 0; i &lt; 4; i++){              
      for(var j = 0; j &lt; 13; j++){
        if(i == 0){players[i][j].style.left = X; players[i][j].style.top = Y;}
        if(i == 1){players[i][j].style.left = X; players[i][j].style.top = Y;}
        if(i == 2){players[i][j].style.left = X; players[i][j].style.top = Y;}
        if(i == 3){players[i][j].style.left = X; players[i][j].style.top = Y;}
        if(show == true)
          players[i][j].src = '../images/c'+players[i][j].id+'.gif';
      }
    }
  }
  </code></pre>
  
  <p>Now I want to add what I said in the title, and I tried to do this:</p>
  
  <pre><code>players[i][j].addEventListener('mouseover', function() {players[i][j].src = '../images/c'+players[i][j].id+'.gif';});
  </code></pre>
  
  <p>I want to add each object an event onmouseover that changes itself src.</p>
  
  <p>How can I achieve that using only simple JavaScript? What I tried returns the following error everytime I move mouse over the objects:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property '13' of undefined
  </code></pre>