you could setup your dom like this:
- <div id="column1">
- <ul class="list">
- <li><a href="pathToImage.jpg">hover me or click me 1</a></li>
- <li><a href="pathToImage.jpg">hover me or click me 1</a></li>
- <li><a href="pathToImage.jpg">hover me or click me 1</a></li>
- </ul>
- </div>
- <div id="column2">content of column 2</div>
and then use this code:
- $('#column1 a').click(function(e){
- // prevent page from following link
- e.preventDefault();
- // get href of clicked anchor
- var thisHref = $(this).attr('href');
- // set background image of column 2
- $('#column2').css('background-image','url('+thisHref+')');
- });
One note however. ID's must be unique, and in the pseudo-code you posted above, you have duplicate id's.