JavaScript: Arrays, Loops and Functions

Question

Currently manipulating the DOM and am having trouble using a for loop to access arrays. I need to add id attributes to the HTML from the ones in the array when moused over.

The goal is to hover over an id element and add the id value from the myIds array and also switch the url src in #mainImg (which is a .jpg) to the one in the array using the imgUrl array.

Essentially the project is a list where one hovers over a link to display an image.

I figured out a long version (requires me to type a function for each #id (there are over 20 ids/urls)) but want to shorten it using loops!

Here is my javascript.

    var imgUrl = [ 'url 1', 'url 2', 'url 3' ];

    var myIds = [];
     myIds [0] = 'a';
     myIds [1] = 'b';
     myIds [2] = 'c';

    for (var i = 0; i < imgUrl.length; i++) {
        imgUrl[i];
        $("[id]").mouseover(function() { 
            var src1 = imgUrl[i];
                $("#mainImage").attr("src", src1);
    });
    }

    for (var i = 0; i < myIds.length; i++) {
        myIds[i];
        $("[id]").mouseover(function(){
            myIds[i];
            var idSrc = myIds[i];
                $("li [id]").attr("id", idSrc);
        }); 
        };

Here is the HTML

<div class="main">
        <img id="mainImage" src="original-url">
    </div>
            <ul class="menu">
                <li><a href="#" id="">one</a></li>
                <li><a href="#" id="">two</a></li>
                <li><a href="#" id="">three</a></li>
            </ul>