scrollbar from images

[maz]

I want to make a scrollbar out of 3 pictures :
- one for 'up'
- one for 'down'
- one for the cursor between

end it's precisely the last one which makes trouble...
How to make it move along the text ?
And how to get the length of a div's content... ?

Have you seen any website implementing this ?


here is the idea of my script, only works for up and down :


<!-- script -->

var scrollAmount = 1;
var i = 0;

function move_up() {
document.getElementsByTagName('div')[9].scrollTop += scrollAmount;
scrollAmount += i;
i += 1/100;
timeoutID1 = setTimeout("toUp()", 10);
}

function move_down() {
document.getElementsByTagName('div')[9].scrollTop -= scrollAmount;
scrollAmount += i;
i += 1/100;
timeoutID2 = setTimeout("toDown()", 10);
}

function clear_up() {
clearTimeout(timeoutID1);
i = 0; scrollAmount = 1;
}

function clear_down() {
clearTimeout(timeoutID2);
i = 0; scrollAmount = 1;
}


<!-- first div which has to scroll - floated right -->
<div id="content">
content with unknown length
</div>

<!-- second div which contains the scroll bar -->
<div id="scrollbar">

<a onMouseOut="clear_down();"
onMouseUp="clear_down();"
onMouseDown="move_down();">
<img src='goutte_haut.jpg' alt='' name='goutte_haut'/>
</a><br/>

<img src='goutte_milieu.jpg' alt=''/><br/>

<a onMouseOut="clear_up();"
onMouseUp="clear_up();"
onMouseDown="move_up();">
<img src='goutte_bas.jpg' name="goutte_bas" alt='' />
</a>

</div>