ブロック要素の横スクロールバーのカスタマイズ（画像）

質問

既に質問を書きましたがつまづいているので書き直します。

ブロック要素の横スクロールバーを画像にしたいです。

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初心者です・・・。
アドバイスよろしくおねがいします。

回答No.1

HIRSYU

いきなりですが、申し訳ありません。
以前のアドバイスが少々ずれていた（不足しすぎた）かもしれません。
今回実際に作ってみてそう思いました。

#文中のスクロールバーとスライドバーというのは同じでしょうか・・・？
#後、少々、質問の意図とずれてるかもしれませんが回答させていただきます。

以下のソースで１と２に関しては解決できていると思います。
かなり手抜きの為、参考程度に見ていただけるといいと思います。

手法変更の為、JavaScript部分は完全に置き換えました。
-- JavaScript -----------------
// バーの移動開始
function startMoveBar(){
// バー
var objSBar = document.getElementById("sbar");
// バーの移動するレール
var objSBarRail = document.getElementById("sbarRail");
// マウス座標（IEのみです。必要に応じて他ブラウザを対応させてください）
var mouseX = document.body.scrollLeft + event.clientX;

// バーの位置を変更
objSBar.style.posLeft = (mouseX - (objSBar.width / 2));
// バーが左に行きすぎないように
if(objSBar.style.posLeft < 0){
objSBar.style.posLeft = 0;
// バーが右に行きすぎないように（[レールの幅]－[バーの幅]が、バーのX座標最大値とする）
}else if(objSBar.style.posLeft > objSBarRail.width - objSBar.width){
objSBar.style.posLeft = objSBarRail.width - objSBar.width;
}

// タイマーではなく、onmousemoveで移動
document.onmousemove = startMoveBar;
}

// バーの移動終了
function stopMoveBar(){
// onmousemoveなどをあまりつかわないので、これで正しいか不明、
// ちょっと調べてみてください・・・
document.onmousemove = "";
}

// 画面のonmouseupでバーの移動終了
document.onmouseup=stopMoveBar;
-------------------------

HTMLの細かいスタイルは調整してください。
-- HTML -----------------
<!--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>
<!-- バーのレールにID付与 -->
<!-- 座標スタイルほしいので、position追加 -->
<!-- レール上クリックでも移動するようにonMouseDownを追加 -->
<td id="sbarRail" width="828" bgcolor="#666666" style="position:relative;left:0px;" onMouseDown="startMoveBar()">
<!-- imgタグだと、ドラッグがうまくいかないので、inputのtype="image"に変更 -->
<!-- positionを絶対座標から相対座標に変更 -->
<!-- onMouseDownとonMouseUpを削除 -->
<input type="image" src="hscrollerdex.png" width="100" height="15" id="sbar" style="position:relative;left:0px;">
</td>
<td width="16"><img src="images/right.gif" width="16" height="16" onMouseDown="down()"></td>
</tr>
</table>

</div>
</div>
-------------------------