Javascript-форум - горизонтальный скроллинг в js

Помогите решить проблему.
Мне нужно:
1. Скроллинг продуктов при помощи JS горизонтально
2. При клике на один из продуктов показывается контент для выбранного продукта.
первое выполнено так:
<div id="content">

<div class="previewbox" id="categories">
<img src="fm/content/img/str-left.gif" class="left" title="" alt="<" />
<img src="fm/content/img/str-right.gif" class="right" title="" alt=">" />

</div>
<script type="text/javascript" charset="utf-8"> document.observe("dom:loaded", function() { var cats = $("categories"); var scroller = new BgScroller(cats, {frameWidth:120}); scroller.showoff(3).updateOptions({duration:.3}); cats.down(".right").observe("click", function(e) { scroller.prev(true); }); cats.down(".left").observe("click", function(e) { scroller.next(true); }); }); </script>
</div>
в class="previewbox" прописана картинка бэкграундом.

второе при помощи мапа:
<img src="fm/content/img/horse-dl.jpg" width="732" height="175" alt="Навигация по сайту" usemap="#Navigation"></div>
<map name="Navigation">
<area shape="rect" coords="50,30,183,163" href="#" onclick="flip('div2'); return false;" alt="Bread">
<area shape="rect" coords="242,1,522,170" href="#" onclick="flip('div1'); return false;" alt="horse">
<area shape="rect" coords="571,29,702,161" href="#" onclick="flip('div3'); return false;" alt="cirque">

</map>

По отдельности я сделала, прекрасно работает. А вот как бы совместить?Может есть другие способы?Т.е. мне нужно чтобы оба условия выполнялись на одном и том же объекте.