jquery при наведении на ссылку показать картинку

[PEOP]

Здравствуйте! Подскажите, как сделать следующее? Допустим, есть набор ссылок с id=1 id=2 id=3, а также список, элементы которого содержат картинки, расположенные одна под другой. Как сделать, чтоб при наведении на ссылку соответсвующий номеру элемент списка "всплывал" на первый план, поверх остальных картинок, т.е. текущий элемент становится прозрачным, а соответсвующий ссылке - появлялся (opacity = 1.0).

Вот код

<div id="links">

<a href="" class="point" id="1">ONE</a>

<a href="" class="point" id="2">TWO</a>

<a href="" class="point" id="3">THREE</a>

</div>

<div id="rotator">

<ul>

<li class="show"><img src="1.jpg" alt=""></li>

<li><img src="2.jpg" alt=""></li>

<li><img src="3.jpg" alt=""></li>

</ul>

</div>

CSS:

#rotator {position: relative; height: 800px; height: 300px; /*margin-left: -19px;*/}

#rotator ul li {float: left; position: absolute; list-style: none;}

#rotator ul li.show {z-index: 500;}

JAVASCRIPT:

$(document).ready(function(){

$('div#rotator ul li').css({opacity: 0.0});

$('div#rotator ul li:first').css({opacity: 1.0});

$("a.point").hover(function() {

var current = $('div#rotator ul li.show');

var hoverID = $(this).attr("id");

var elemLI = $('li:eq('+hoverID+')');

elemLI.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

current.css({opacity: 0.0}, 1000).removeClass('show');}, function() {return false;});

});

Получается Бред! Картинки меняются непонятно как вообще. Спасибо заранее.

[klierik]

положи код в теги форума

[PEOP]

Ок

Вот код
<div id="links">
<a href="" class="point" id="1">ONE</a>
<a href="" class="point" id="2">TWO</a>
<a href="" class="point" id="3">THREE</a>
</div>

<div id="rotator">
<ul>
<li class="show"><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
</div>

CSS:
#rotator {position: relative; height: 800px; height: 300px; /*margin-left: -19px;*/}
#rotator ul li {float: left; position: absolute; list-style: none;}
#rotator ul li.show {z-index: 500;}

JAVASCRIPT:
$(document).ready(function(){
$('div#rotator ul li').css({opacity: 0.0});
$('div#rotator ul li:first').css({opacity: 1.0});
$("a.point").hover(function() {
var current = $('div#rotator ul li.show');
var hoverID = $(this).attr("id");
var elemLI = $('li:eq('+hoverID+')');
elemLI.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
current.css({opacity: 0.0}, 1000).removeClass('show');}, function() {return false;});
});