Scroller na JS

[Sajam]

Chodzi o to, że skrypt jest zorientowany obiektowo i może być użytych wiele instancji na jednej stronie. Czyli dla Ciebie pasuje idealnie.

1. Po pierwsze załączasz skrypt:

Kod:

<script type="text/javascript" language="JavaScript1.2" src="hvscroll.js"></script>

2. Każdy scroller definiujesz w JS w taki sposób:

Kod:

<script type="text/javascript">
var scrollerName = new InlineScrollbox('scrollerName', 'Page1');
</script>

stąd winika, że scrollerName musi być inne dla każdego scrollera (var scrollerName i 'scrollerName').

3. Później tworzysz pojemniki na treść (zwróć uwagę na atrybut "name"), gdzie ustalasz szerokość/wysokość (0, 0, 300, 200):

Kod:

<ilayer name="scrollerName-Container" clip="0, 0, 300, 200">
<script type="text/javascript" language="JavaScript1.2"><!--
if (!isNS4) scr.startArea(300, 200);
//--></script>

<script type="text/javascript" language="JavaScript1.2"><!--
if (!isNS4) scr.endArea();
//--></script>

</ilayer>

4. Teraz do pojemnika dodajesz strony. Każda kolejna ma mieć ustawiony atrybut visibility na hidden, oprócz pierwszej.

Kod:

<ilayer name="scrollerName-Container" clip="0, 0, 300, 200">
<script type="text/javascript" language="JavaScript1.2"><!--
if (!isNS4) scr.startArea(300, 200);
//--></script>

    <layer name="scrollerName-Page1" visibility="visible">

       <script type="text/javascript" language="JavaScript1.2"><!--
       if (!isNS4) scr.startPage('Page1');
       //--></script>
      
       treść...

       <script type="text/javascript" language="JavaScript1.2"><!--
       if (!isNS4) scr.endPage();
       //--></script>

    </layer>

    <layer name="scrollerName-Page2" visibility="hidden">

       <script type="text/javascript" language="JavaScript1.2"><!--
       if (!isNS4) scr.startPage('Page2');
       //--></script>
      
      treść...

       <script type="text/javascript" language="JavaScript1.2"><!--
       if (!isNS4) scr.endPage();
       //--></script>

    </layer>

<script type="text/javascript" language="JavaScript1.2"><!--
if (!isNS4) scr.endArea();
//--></script>

</ilayer>

5. Dodajesz sterowanie:

Kod:

<a href="javascript:void(0)"
onmouseover="scrollerName.setScroll(0, -4, 4)"
onmousedown="scrollerName.setScroll(0, -10, 8); return false"
onmouseup="scrollerName.setScroll(0, -4, 3); return false"
onmouseout="scrollerName.setScroll(0, 0, 2)">Up</a>

<a href="javascript:void(0)"
onmouseover="scrollerName.setScroll(0, 4, 4)"
onmousedown="scrollerName.setScroll(0, 10, 8); return false"
onmouseup="scrollerName.setScroll(0, 4, 3); return false"
onmouseout="scrollerName.setScroll(0, 0, 2)">Down</a>

(dodałem tylko sterowanie up/down).

Powinno działać, powodzenia