Recently I found an online tutorial to create scrolling DIV content with graphical scrollbars. Before reading on you may want to take a look at the link below:

http://www.dyn-web.com/code/scroll/vert.php (vertical scrolling)

The original source code for the scrolling DIV content can be found here:

http://www.dyn-web.com/zipped/dw_scroll.zip

In the extracted folder you should look for the HTML page named “scroll_v.html”.

I tried to find a way to integrate this code in my web site. Unfortunately the person who made this code does not provide support. I would really appreciate if someone would be willing to take a look at the code and my questions below.

Questions:

1. I would like to use a standard link to my external stylesheet file. So the stylesheet should not be created dynamically. Which piece of code should I delete when I choose to include my own stylesheet? What should I pay attention to when doing this? After all, my stylesheet should fully work without obstructing the intentions of the Javascript code.

The following code originates from "scroll_v.html":

Code:
// if code supported, link in the style sheet and call the init function onload
if ( dw_scrollObj.isSupported() ) {
    //dw_writeStyleSheet('css/scroll.css');
    dw_Event.add( window, 'load', init_dw_Scroll);
}
2. I assume the class “mouseover_up” and “mouseover_down” should not be specified in the stylesheet, because they are not related to CSS at all, am I right? I do not understand how these two classes (which are recognized as handles) can be written in the HTML code as though they are related to CSS.

The following code originates from "scroll_v.html":

Code:
<div id="scrollLinks">
    <a class="mouseover_up" href="#"><img src="images/tri-up.gif" alt="" border="0" /></a>
    <a class="mouseover_down" href="#"><img src="images/tri-dn.gif" alt="" border="0" /></a>
</div>
3. Instead of two images of triangles I would like to use CSS triangles as shown here:

http://www.howtocreate.co.uk/tutorials/css/slopes

I guess this means that class names like “mouseover_up” and “mouseover_down” should be associated with a DIV. How can this be realized? For example, it does not work when I add a class “mouseover_up” to the DIV.

Please take into account that I am quite new to Javascript. Thanks in advance!