[Беляш]

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

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

<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>

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