I am trying to create and array of objects so that I can access them in a for loop in jQuery and I know that this works in Actionscript so what I am trying to do is convert my current knowledge to jQuery that will work.

Please have a look at this and tell me why I cannot access divToShow

Thanks guys

var homeImages = new Array();
homeImages[0] = { hoverImage: ".leftColImage1", divToShow: ".image1", rollOverImg: "img-family-over.jpg" };
homeImages[1] = { hoverImage: ".leftColImage2", divToShow: ".image2", rollOverImg: "img-students-over.jpg" };
homeImages[2] = { hoverImage: ".leftColImage3", divToShow: ".image3", rollOverImg: "img-pros-over.jpg" };
homeImages[3] = { hoverImage: ".leftColImage4", divToShow: ".image4", rollOverImg: "img-retired-over.jpg" };

var hoverImage;
var activeDiv;
var mainContent = ".mainContent";

for (k = 0; k < homeImages.length; k++) {

    homeImages[k].id = k;
    $(homeImages[k].hoverImage).mouseover(function() {
    //alert("divToShow : " + homeImages[this.id].divToShow);
        alert("this : " + this.id);
        activeDiv = homeImages[k].divToShow;
        $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/" + homeImages[k].rollOverImg);
        $(mainContent).hide();
        $(homeImages[k].divToShow).slideDown("slow");
    }).mouseout(function() {
        $(".leftColImage1 img").attr("src", "/App_Themes/MyChoice2010/Images/img-family.jpg");
        $(".image1").hide();
        $(mainContent).slideDown("slow");
    });
}