Getting the background changed using an array

Getting the background changed using an array

My pseudo code looks something like this:

<div id="column1">
  <ul class="list">
    <li id="123"><a href="void">hover me or click me 1</li>
    <li id="456"><a href="void">hover me or click me 2</li>
    <li id="789"><a href="void">hover me or click me 3</li>
  </ul>
</div>
<div id="column2" style="background:url('images/someimage.jpg);">
  <div id="123">look at me 1</div>
  <div id="456">look at me 2</div>
  <div id="789">look at me 3</div>
</div>

basically I am having a hard time coming up with jquery code to have it so if I rollover something in .list that it will change the background image in #column2
I am thinking that building an array of IDs and IMAGELOCs would do the trick. Basically the PHP is going to give me IDs and Image Locations... I am just not sure the best way to write the jquery (cleanly) to perform the functions I want. I also want it so when you click the LI that the ID number that matches the DIV inside of #column2 will be shown... I understand jquery on a "copy & paste & modify" basis but having a hard time utilizing FORs and such. Supposedly .each() is a substitute for FOR... but I have no idea how that helps me here.

Please help, or point me in the right direction... and man pages tend to confuse the hell out of me.