Оптимизация скрипта

[Беляш]

Есть два дива: в первом диве отображаеться картинка, во втором список ссылок (менюшка). В зависимости от того на какой пункт меню во втором диве наведен курсор, в первом диве меняется картинка.

Первый див с картинками:

<div class="pic">
	<img src="..." id="img1" />
	<img src="..." id="img2" />
	<img src="..." id="img3" />
</div>

Второй див со списком:

<ul>
	<li><a href="">Главная</a></li>
	<li><a href="">Методичка</a></li>
	<li><a href="">Выставки</a></li>
	<li><a href="">Поздравляем</a></li>
</ul>

jQuery:

$(document).ready(function() {
	$('li:eq(0)').hover(
		function() { $('#img1').fadeIn();},
		function() { $('#img1').fadeOut();}
	);
	$('li:eq(1)').hover(
		function() { $('#img2').fadeOut();},
		function() { $('#img2').fadeIn();}
	);
	$('li:eq(2)').hover(
		function() { $('#img3').fadeOut();},
		function() { $('#img3').fadeIn();}
	);
});

Вопрос: можно ли как-нить оптимизировать данные JS-строчки? Может с помощью цикла?

PS: Можно было бы размещать картинки непосредственно в списки вот так

<li><a href=""><img src="" /></a></li>

, тогда бы код стал меньше (не было бы повторений кусков кода). Но тогда придеться переделывать движок сайта из-за одной менюшки.

[exec]

$('li').each(function (i) {
	$(this).hover(function () {
		$('#img' + i + 1).fadeOut();
	}, function () {
		$('#img' + i + 1).fadeIn();
	});
});

[Беляш]

Спасибо, exec.

UPD: Вот что у меня получилось, возможно кому-нибудь пригодиться:

$('ul').each(function (i) {
	var k=i+1;
	$('li:eq('+i+')').hover(
		function () { $('#img' + k).fadeIn();},
		function () { $('#img' + k).fadeOut();}
	);
});

Касательно строчки

$('#img' + i + 1)

конкатенация строк происходит слева на право, а значит это выражение, допустим при i=0, дает id = img01, а не желаемый img1. Поэтому Я ввел var k=i+1 И в последствии её использовал.

PS: Я понимаю, что exec предложил только идею, за это ему спасибо.

[exec]

От конкатенации можно избавиться так:

$('#img' + (i + 1))