[Résolu] Boucle sur source images

Bonjour, j'ai un petit problème avec la boucle suivante:

var geeks = document.querySelectorAll(".geek img");
for (var i = 0; i < geeks.length; i++){
  geeks[i].addEventListener('mouseover', function(){  // changer la scr de l'image
    var source = this.setAttribute('src', 'img/geek-animation/geek_red/geek-' + i + '.png');
    document.querySelectorAll('.geek img')[i] = source;
  });
  geeks[i].addEventListener('mouseout', function(){  // rétablir la source de l'image
    var source = this.setAttribute('src', 'img/geek-animation/geek_white/geek-' + i + '.png');
    document.querySelectorAll('.geek img')[i] = source;
  });
}

cela semble fonctionner pour ce qui concerne la balise img, mais la source me donne une image qui n'existe pas à savoir "geek-7.png", alors que les images vont de geek-0.png à geek-6.png. logiquement cette boucle devrait m'envoyer la même valeur de i que la balise img non?

je ne comprends pas comment faire. quelqu'un aurait-il une soluce pour une débutante comme moi?

merci et bonne année!!!!

j'ai trouvé la soluce finalement:

var geeks = document.querySelectorAll(".geek img");
 
for (let i = 0; i < geeks.length; i++) {
 
    geeks[i].addEventListener('mouseover', function () { // changer la scr de l'image           
        this.src = 'img/geek-animation/geek_red/geek-' + i + '.png';
    });
    geeks[i].addEventListener('mouseout', function () { // rétablir la source de l'image
        this.src = 'img/geek-animation/geek_white/geek-' + i + '.png';
    });

Modifié par Seds_94 (02 Jan 2018 - 18:42)