scrollbar à partir d'images

Je veux faire une scrollbar a partir de 3 images :
- une pour 'haut'
- une pour 'bas'
- une pour le curseur entre les deux

Et c'est précisément ce dernier qui me donne mal à la tête ;)
Comment programmer son mouvement ?
(je n'arrive pas à avoir la longueur du contenu qui doit être scrollé)

Avez vous vu un site qui utilise un scroolbar perso ?

Voilà un aperçu de mon script, marche pour haut/bas seulemnt :


<!-- 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>