JavaScript - rollover efekt

Question

Witam!

Chce stworzyć efekt rollover dla dużej ilości obrazków (np. 100). Na stronie z kurem js natrafiłem na fajne rozwiązanie szybkiego tworzenia nowych obiektów Image: 

var names = [
    'obrazek.jpg',
    'kartofelek.jpg',
    'piesek.jpg',
    'kotek.jpg',
    'czekolada.jpg'
];

for (x=0; x<names.length; x++) {
    var img[x] = new Image();
    img[x].src = names[x];
}

I próbuje odpalić efekt np. na pierwszym zdjęciu poprzez kod poniżej...

document.querySelectorAll('img')[0].addEventListener('mouseover', function(){
    this.src = img[1];
});

document.querySelectorAll('img')[0].addEventListener('mouseout', function(){
    this.src = img[1];
});

... i mam taki komunikat zwrotny: "Uncaught TypeError: Cannot set property 'src' of undefined".

Czy w tablicy powinny być podane pełne ścieżki do plików ze zdjęciami? Ma ktoś pomysł w czym tkwi problem?

Answer 1

Jak już to:

for (var x = 0, MAX = names.length; x < MAX; ++x)

Co do tego zapisu, to nie wiem co tu się odjaniepawla:

var img[x] = new Image();
img[x].src = names[x];

Zdecyduj się czy img ma być lokalne w pętli czy to coś występującego poza pętlą bo linijka 10 nie przechodzi. 

Comments

Chce żeby tablica zawierała zdjęcia lokalne, umieszczone np w folderze img.  Zakładając że ścieżka to obrazka jest następująca img/czekolada.jpg i takie tez src zostalo podane w pliku html, to co powinienem zapisać w tablicy, żeby móc się odwoływać do danego zdjęcia w tablicy poprzez jego indeks?

---

Problem rozwiązany, może się to komuś przyda.

var imgNames = ['img/obrazek1.jpg', 'img/obrazek2.jpg']; // w tablicy podajemy ścieżki do obrazków, które chcemy załadować
var img = []; // nowa pusta tablica do przechowywania obiektów typu Image;

for (var x = 0; x <= imgNames.length; x++){
  var img[x] = new Image(); // tworzymy nowy obiekt typu Image...
  img[x].src = imgNames[x]; // ...i wrzucamy go do tablicy przypisując ścieżkę do obrazka
}

Dzięki temu mamy załadowane zdjęcia do pamięci przeglądarki i w efekcie rollover zdjęcia zmieniają się natychmiastowo (bez poślizgu czasowego potrzebnego na załadowanie zdjęcia).