ブロック要素の横スクロールバーのカスタマイズ（画像）
既に質問を書きましたがつまづいているので書き直します。
ブロック要素の横スクロールバーを画像にしたいです。
http://www.apple.com/jp/mac/
の上のメニューみたいに横にスライドし、スクロールバーを画像にしたいのです。
ボタンをクリックして任意の位置に飛ぶスライドはすでにすでにできています。
スクロールバーを動かすと、ブロック要素のなかをスクロールすることができましたが、以下の方法がわかりません。
1. スクロールバーを中央揃えの幅の決まったエリア内だけを移動させたい。
（スクロールバーをクリックするとウィンドウの一番左にいってからマウスストーカーしはじめ、かつ、またウィンドウをクリックしないとマウスストーカーが終了しない。）
2. スライドバー以外のスライドエリアをクリックするとそこにスライドバーがスライドインするようにしたい。
3. アンカーに飛ばすボタンをクリックし任意の位置にスライドする際、スライドバーも同期させたい。
現在の記述は以下の通りです。
<script language="JavaScript">
var timeout;
var x = 0;
var step = 5;
var icoX = 0; // アイコンの位置
var mouX = 0; // マウスの位置
function down(){
if (x < 0){x=0;}
var e=document.getElementById("scrollarea");
if(e.scrollLeft<e.scrollWidth-e.offsetWidth){
sbar.style.pixelLeft=x;
e.scrollLeft = x;
x = x + step;
timeout=setTimeout("down()",2);
}
}
function up(){
if (x >=0 ){
document.getElementById("scrollarea").scrollLeft = x;
sbar.style.pixelLeft=x;
x = x - step;
}
timeout=setTimeout("up()",2);
}
document.onmousemove = onMouseMove;
function onMouseMove(e) {
mouX = event.clientX;
}
function onTimer() {
icoX += (icoX < mouX) ? 1 : -1;
sbar.style.left = icoX + "px";
document.getElementById("scrollarea").scrollLeft = sbar.style.pixelLeft;
timeout=setTimeout("onTimer()",2);
}
function stop1(){
clearTimeout(timeout);
}
document.onmouseup=stop1;
</script>
//bodyタグの中のスライドを実装したい部分
<div id="my-glider">
<div class="scroller" style="height: 188px; width:864px;overflow:hidden;" id="scrollarea">
//ここに内容がはいります。長いので省略します。
<table width="860" height="16" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="16"><img src="images/left.gif" width="16" height="16" onMouseDown="up()"></td>
<td width="828" bgcolor="#666666"><div id="sbar" style="position:absolute;margin-top:-8px;"><img src="images/hscrollerdex.png" width="100" height="15" onMouseDown="onTimer()" onMouseUp="stop1();"></div></td>
<td width="16"><img src="images/right.gif" width="16" height="16" onMouseDown="down()"></td>
</tr>
</table>
</div>
</div>
javascript初心者です・・・。
アドバイスよろしくおねがいします。
