puzjob

Уважаемые посетители, помогите решить проблему: имеется код: <div id="gallery"> <table id="table" border="0"> <tr><td valign="top"> <img src="./img/catalog/host/1/1.jpg" alt="" id="main-img1" /> </td> <td align="center" valign="top"> <ul> <li><img src="./img/catalog/host/1/thumb/1.jpg" alt="" width="100" /></li> <li><img src="./img/catalog/host/1/thumb/2.jpg" alt="" width="100" /></li> <li><img src="./img/catalog/host/1/thumb/3.jpg" alt="" width="100" /></li> </ul> </td> </tr> </table> </div> и скрипт для него: <script type="text/JavaScript"> // prepare the form when the DOM is ready $(document).ready(function() { $("#gallery li img").hover(function(){ $('#main-img2').attr('src',$(this).attr('src').replace('thu mb/', '')); }); var imgSwap = []; $("#gallery li img").each(function(){ imgUrl = this.src.replace('thumb/', ''); imgSwap.push(imgUrl); }); $(imgSwap).preload(); }); $.fn.preload = function() { this.each(function(){ $('<img/>')[0].src = this; }); } </script> Проблема в следующем: Что бы разместить 2 блока с меняющимися картинками необходимо id заменить class, но в таком случае последняя замененная картинка с class="main-img2" появляется во втором блоке. Как сделать 2 таких блока рядом и чтобы они не зависели друг от друга? Можно конечно для каждого из блоков присвоить свой id, но таких блоков будет много и не хотелось бы раздувать код сайта. В общем как доработать скрипт чтобы можно было разместить много подобных блоков с одним классом?