fill div with image when text li is clicked

I am learning the basics of jquery and have a question.

I have a client who wants her "friends" page to have a div that fills with a screenshot of her friend's site when the li link of the friend's name is clicked. This screenshot image will then function as a link to the respective website which will open in new window. The div will need to preload the first friends screenshot on the list so an image occupies the div when la开发者_Go百科nding on the page.

How can I make the li link fill the div with a screenshot for each of the eight friends she wants to list?

Thanks so much for any advice.

Here you go:

http://jsfiddle.net/NDnsa/

HTML:

<div id="nav">
    <ul>
        <li><a href="#">Friend 1</a></li>
        <li><a href="#">Friend 2</a></li>
        <li><a href="#">Friend 3</a></li>
    </ul>
</div>

<div id="view">
    <a href="http://www.google.com"><img src="http://www.dummyimage.com/350x200/000/fff&text=friend1.jpg" /></a>
</div>

JS/JQUERY:

var friendArr = [
    {
        url: "http://www.google.com",
        img: "http://www.dummyimage.com/350x200/000/fff&text=friend1.jpg"
    },
    {
        url: "http://www.yahoo.com",
        img: "http://www.dummyimage.com/350x200/cef/ff0&text=friend2.jpg"
    },
    {
        url: "http://www.stackoverflow.com",
        img: "http://www.dummyimage.com/350x200/f00/fff&text=friend3.jpg"
    }
];

$("#nav a").click(function() {
    var idx = $("#nav a").index(this);
    $("#view a").attr("href", friendArr[idx].url);
    $("#view a img").attr("src", friendArr[idx].img);
    return false;
});