Ротатор картинок

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

Код:

 <style type="text/css">
    div#rotator {position:relative; height:110px; margin-left: -10px;}
    div#rotator ul li {float:left; position:absolute; list-style: none; list-style: none;}
    </style>

    <div id="rotator">
    <ul>
    <li class="show">
    <img src="http://savepic.net/635292.jpg" width="160" height="107"  alt="pic1" /></li>
    <li><img src="http://savepic.net/624028.jpg" width="160" height="107"  alt="pic2" /></li>
    <li> <img src="http://savepic.net/616860.jpg" width="160" height="107"  alt="pic3" /></li>
      </ul>
    </div>

Друззья, со ссылью уже справилась сама... )

Мож кто подскажет, что там в стиле именно изменить, чтобы картинку отцентрировать...

Нет, все ж ссылки НЕ работают правильно...

Все клики почему-то выводят на тему, прикретленную к последней картинке...
ЧТО в коде НЕ ТАК???

Код:

<style type="text/css">
div#rotator {position:relative; height:250px; margin-left: 0px;}
div#rotator ul li {float:left; position:absolute; list-style: none;}
</style>

<div id="rotator">
<ul>
<li class="show">

<a href="адрес темы"><img src="адрес картинки" alt="название" /></a></li>

<li><a href="адрес темы"><img src="адрес картинки" alt="название" /></a></li>

<li><a href="адрес темы"><img src="адрес картинки" alt="название" /></a></li>

</ul>
</div>

Словом, поговорила сама тут с собой )))

Нашла. Ежели кому надо, вот работающий код, который запихивается в виджет:

Код:

<style type="text/css">
div#rotator {width:100%; position:relative; height:250px; margin-left: auto;}
div#rotator ul li {width:100%; float:left; position:absolute; list-style: none;}
div#rotator ul li.show {width:100%; z-index:500; padding: 0; list-style: none; margin-left: auto; margin-left: auto;}

    </style>

<table width=100% border=0><tr><td align=center>

    <div id="rotator">
    <ul>
    <li class="show">

<a href="ссыль"><img src="адрес картинки" alt="название" /></a></li>

<li><a href="ссыль"><img src="адрес картинки" alt="название" /></a></li>

<li><a href="ссыль"><img src="адрес картинки" alt="название" /></a></li>
 
    </ul>
    </div>

</td></tr></table>

Помимо этого в Модули - Управление кодами Javascript вставляем такую вот красоту:

Код:

function theRotator() {
      // Устанавливаем прозрачность всех картинок в 0
      $('div#rotator ul li').css({opacity: 0.0});
   
      // Берем первую картинку и показываем ее (по пути включаем полную видимость)
      $('div#rotator ul li:first').css({opacity: 1.0});
   
      // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
      setInterval('rotate()',3000);
    }
   
    function rotate() { 
      // Берем первую картинку
      var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));
   
      // Берем следующую картинку, когда дойдем до последней начинаем с начала
      var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); 
   
      // Расскомментируйте, чтобы показвать картинки в случайном порядке
      // var sibs = current.siblings();
      // var rndNum = Math.floor(Math.random() * sibs.length );
      // var next = $( sibs[ rndNum ] );
   
      // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
      next.css({opacity: 0.0})
      .addClass('show')
      .animate({opacity: 1.0}, 1000);
   
      // Прячем текущую картинку
      current.animate({opacity: 0.0}, 1000)
      .removeClass('show');
    };
   
    $(document).ready(function() {     
      // Запускаем слайдшоу
      theRotator();
    });


В сопроводиловках к ротатору обычно пишут, что все картинки должны быть одного размера. В принципе - не обязательно. Лучше конечно, чтобы они хотя бы по высоте были одинаковы, что же касается ширины, то код настроен на центрирование картинки, так что при плавной их смене разнобой в ширине не смотрится уродливо. Удачи.