[JS] image swap functie

[ViNyL]

Ik ben bezig een kleine image swap functie te maken zodra je met je muis over een image heen gaat.

Nou zit mijn functie al bijna in elkaar maar kan een probleem maar niet takelen.

mijn functie:

JavaScript:

function prepareMenu() {
if (!document.getElementById) return false;
if (!document.getElementById("menu")) return false;
var menu = document.getElementById("menu");
var images = menu.getElementsByTagName("img");
    for (var i=0; i< images.length; i++) {
        var menuitem = images[i].getAttribute("rel");
            if (menuitem == "menuitem") {
                images[i].onmouseover = function() {
                images[i].src = "images/test.jpg";      
                }
            }
    }
}

op de regel:
[

JavaScript:

images[i].src = "images/test.jpg";      

Krijg ik constant de melding: Fout: images[i] is undefined. Terwijl als ik deze met een alert in de regel ervoor laat tonen, deze er wel is. Ik kan bijvoorbeeld ook wel met een alert de huidige src tonen.

Waar komt dit door en wat doe ik fout?

[Fuzzillogic]

In je onmousover-functie kom je in de context van de image-object zelf terecht. Dus dan zul je this.src="images/test.jpg"; moeten gebruiken. En 10 tegen 1 dat dat helemaal geen jpeg hoort te zijn, maar een fraaie PNG

Maar waarom gebruik je niet gewoon CSS met :hover?

[KompjoeFriek]

Lijkt mij een scope probleem

code:

function prepareMenu() { // begin scope van prepareMenu
if (!document.getElementById) return false;
if (!document.getElementById("menu")) return false;
var menu = document.getElementById("menu");
var images = menu.getElementsByTagName("img");
    for (var i=0; i< images.length; i++) {
        var menuitem = images[i].getAttribute("rel");
            if (menuitem == "menuitem") {
                images[i].onmouseover = function() { // begin scope function()
                images[i].src = "images/test.jpg";        
                }
               // einde scope function()
            }
    }
}
// einde scope prepareMenu

De variabele images is niet beschikbaar in de scope van de nieuwe function

edit:
en meteen een mooie oplossing van de meneer boven me

[ViNyL]

KompjoeFriek schreef op zaterdag 14 maart 2009 @ 21:42:
Lijkt mij een scope probleem

code:

function prepareMenu() { // begin scope van prepareMenu
if (!document.getElementById) return false;
if (!document.getElementById("menu")) return false;
var menu = document.getElementById("menu");
var images = menu.getElementsByTagName("img");
    for (var i=0; i< images.length; i++) {
        var menuitem = images[i].getAttribute("rel");
            if (menuitem == "menuitem") {
                images[i].onmouseover = function() { // begin scope function()
                images[i].src = "images/test.jpg";        
                }
               // einde scope function()
            }
    }
}
// einde scope prepareMenu

De variabele images is niet beschikbaar in de scope van de nieuwe function

edit:
en meteen een mooie oplossing van de meneer boven me

ARR crap je hebt gelijk.. zit je lekker een tijd over heen te staren

[ViNyL]

Fuzzillogic schreef op zaterdag 14 maart 2009 @ 21:42:
In je onmousover-functie kom je in de context van de image-object zelf terecht. Dus dan zul je this.src="images/test.jpg"; moeten gebruiken. En 10 tegen 1 dat dat helemaal geen jpeg hoort te zijn, maar een fraaie PNG

Maar waarom gebruik je niet gewoon CSS met :hover?

Dat is ook nog een optie. Alleen dan heb ik 7 classes voor 7 menu items omdat de plaaties een andere naam hebben...

[Fuzzillogic]

ViNyL schreef op zaterdag 14 maart 2009 @ 21:46:
[...]


Dat is ook nog een optie. Alleen dan heb ik 7 classes voor 7 menu items omdat de plaaties een andere naam hebben...

Ja en? Nu heb je javascript. Dat vind ik persoonlijk ranziger.

En CSS2 is je vriend:

Cascading Stylesheet:

ul#menu li:first-child { background-image: URL(...); }
ul#menu li:first-child + li { background-image: URL(...); }
ul#menu li:first-child + li + li { background-image: URL(...); }

Geen letter HTML meer nodig.

[ Voor 10% gewijzigd door Fuzzillogic op 14-03-2009 21:55 ]

[Tofu]

ViNyL schreef op zaterdag 14 maart 2009 @ 21:46:
[...]
Dat is ook nog een optie. Alleen dan heb ik 7 classes voor 7 menu items omdat de plaaties een andere naam hebben...

die nog steeds sneller zijn dan javascript