Preloading images with javascript does not work

As noted within my comment, you are passing an array of arrays to the preLoadImages method.

As a result, you are passing an array to image[i].src which means it won't get loaded.

Try

$(document).ready(function () {
    preloadImages(
        ['../../Content/Resources/close_mouse_over.png', '../../Content/Resources/close.png']);
});

function preloadImages(sources) {
        var image = new Array();
        for (var i = 0; i < sources.length; i++) {
            image[i] = new Image();
            image[i].src = sources[i];
        }
    }

function mouseOverForImage(imgId, imgSrcs) {
        document.getElementById(imgId).src = imgSrcs;
    }

or, if you want to keep the array of array's, then use

function preloadImages(sources) {
        var image = new Array();
        for (var i = 0; i < sources.length; i++) {
            image[i] = new Image();
            image[i].src = sources[i][0];
        }
    }

Edit, on further investigation, a possible cause is preloadImages destroys the image array after preloading the images.

try this instead:

function preloadImages(sources) {
    window.preloadedImages = new Array();
    for (var i = 0; i < sources.length; i++) {
        window.preloadedImages[i] = new Image();
        window.preloadedImages[i].src = sources[i];
    }
}

This stores the preloaded images within the window object, allowing them to preload properly.

Hope that helps?