Изменение бэкграунда страницы

[Heidel]

На странице присутствует элемент для переключения бэкграунда страницы


html-код

<div id="selectBackground">
			<p>Select bg</p>
			<ul>
				<li><a href="javascript:void(0)" class="active"></a></li>
				<li><a href="javascript:void(0)"></a></li>
				<li><a href="javascript:void(0)"></a></li>
			</ul>
		</div> <!-- /selectBackground-->

css

#selectBackground ul  li  a{
	background: url('../images/select_bg_unactive.png') no-repeat;
	display: block;
	width: 16px;
	height: 16px;
}

#selectBackground ul  li  a.active{
	background: url('../images/select_bg_active.png') no-repeat;
}

пока к элементу сделан скрипт, который меняет класс у активного пункта

<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
	
	<script type="text/javascript">
		$(function() {
		
		<!-- Select background -->
        $("#selectBackground ul li a").click(function(e) {
			e.preventDefault();
			$("#selectBackground ul li a").removeClass('active');
			$(this).addClass('active');
		});
            
         });
 	</script>

подскажите, как еще добавить к переключению изменение бэкграунда сайта в зависимости от выбранного пункта?

[Heidel]

В общем, пока сделано так
в списке ссылок к каждой ссылке добавлен свой id

<div id="selectBackground">
			<p>Select bg</p>
			<ul>
				<li><a href="javascript:void(0)" class="active" id="bg1"></a></li>
				<li><a href="javascript:void(0)" id="bg2"></a></li>
				<li><a href="javascript:void(0)" id="bg3"></a></li>
			</ul>
		</div>

а к диву, у которого нужно изменить бэкграунд, добавлен класс

<div id="wrapper" class="background1"></div>

для каждого класса прописано стилевое свойство

#wrapper {
	margin: 0 auto;
	width: 1024px;
	height: 1552px;
}

.background1 {
	background: url('../images/main1_background.png') no-repeat;
}

.background2 {
	/*background: red;*/
	background: url('../images/main2_background.png') no-repeat;
}

.background3 {
	/*background: yellow;*/
	background: url('../images/main3_background.png') no-repeat;
}

скрипт

<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
	
	<script type="text/javascript">
		$(function() {
		
		<!-- Select background -->
        $("#selectBackground ul li a").click(function(e) {
			e.preventDefault();
			$("#selectBackground ul li a").removeClass('active');
			$(this).addClass('active');
			var clickId = this.id;
			var i = clickId.charAt(2)
			var str = "background" + i;
			$("#wrapper").attr("class", str);
			
		});
         
     });
 	</script>

замечания всячески приветствуются

[foker]

можно добавить к ссылке data-аттрибут, допустим data-background
потом присваиваешь при клике:
var bgImage = $(this).data("background");
$("#wrapper").css("background-image", bgImage);
не помню точно, так ли прописывается первый аргумент в методе css..