i have a bunch of links on my main page
i.e
a href="one/index.html"
a href="two/index.html"
etc.
i only want to go to the index target if javascript is disabled...if it isn't, i'd like it so when i click the link i want to swap an image in a div (id="theimage") on the page.

here's what i've tried:

function prepareMainLinks() {
    var mainImages = Array()
    mainImages["one"] = "pics/a.jpg";
    mainImages["two"] = "dummy/b.jpg";
    mainImages["three"] = "tack/c.jpg";
    mainImages["four"] = "pics/joe.jpg";
    mainImages["five"] = "words/anotherword.jpg";

    // graceful degradation tests
    if (!document.getElementsByTagName || !document.getElementById || !document.getElementById("topmenu")) return false;
    // set up all the links to call showPic
    var topmenu = document.getElementById("topmenu");
    var links = topmenu.getElementsByTagName("a");
    var errorstring;
    for (var i = 0; i < links.length; i++) {
        var the_link = links[i];
        var the_links_href = the_link.getAttribute("href");
        if (the_links_href) {
            for (key in mainImages) {
                if (the_links_href.indexOf(key) == 0) {
                    the_link.onclick = function() {
                        return !(showPic("theimage", mainImages[key]));
                    }
        }
    }
}


function showPic(location, new_pic) {
    if (!document.getElementById || !document.getElementById(location)) return false;
    var where = document.getElementById(location);
    where.setAttribute("src", new_pic);
    return true;
}


problem is, it only shows the last image (anotherword.jpg) for all the links..i'm assuming there's a problem in my onclick function, i'm assuming mainImages[key] get's evaluated too late...at which point they're all set to the last image...

how do i fix this?

i've done this to get it to work, but I'm still wondering why have mainImages as a global didn't work, if anyone knows I'd appreciate hearing why.

function prepareMainLinks() {
    mainImages = Array();
    mainImages["evacuee"] = "evacuee/pics/evacusaurus.jpg";
    mainImages["dummy"] = "dummy/comingsoon.jpg";
    mainImages["tack"] = "tack/tack.jpg";
    mainImages["rvid"] = "rvid/rvid.jpg";
    mainImages["words"] = "words/husky.jpg";
    // graceful degradation tests
    if (!document.getElementsByTagName || !document.getElementById || !document.getElementById("topmenu"))
        return false;
    // set up all the links to call showPic
    var topmenu = document.getElementById("topmenu");
    var links = topmenu.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        var the_link = links[i];
        var the_links_href = the_link.getAttribute("href");
        for (key in mainImages) {
            if (the_links_href.indexOf(key) == 0) {
                the_link.associatedImageSrc = mainImages[key];
                the_link.onclick = function() {
                    return !(showPic("theimage", this.associatedImageSrc));
                    //old approach that didn't work
                    //return !(showPic("theimage", mainImages[key]));
                }
            }
        }
    }
}