• 締切済み

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

ブロック要素の横スクロールバーを画像にしたいです。 http://www.apple.com/jp/mac/ の上のメニューみたいに横にスライドし、スクロールバーを画像にしたいのです。 ボタンをクリックして任意の位置に飛ぶスライドはすでにすでにできています。 スクロールバーの差し替えとして http://www.n-son.com/scripts/jsScrolling/new/example2.html を参考にしてやってみていますが、横スクロールバーに応用したいのですが、どこをかえたらいいかわかりません。 アドバイスよろしくおねがいします。

みんなの回答

  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.1

>ボタンをクリックして任意の位置に飛ぶスライドはすでにすでにできています。 ということですので、残りは、マウスストーカーの要領でマウスに付いてくるようにしたらいいです。 マウスストーカーと違う点は、 　・横移動のみ 　・特定の画像のonmousedownでストーカー開始 　・画面のonmouseupでストーカー終了 です。

gingamisan
質問者

お礼

やるべきことがわかってきた気がします。 勉強しながら完成させたいとおもいます。 遅くなりましたが、アドバイスありがとうございました。

gingamisan
質問者

補足

画面のonmouseupはどのように記述すればいいのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

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

    既に質問を書きましたがつまづいているので書き直します。 ブロック要素の横スクロールバーを画像にしたいです。 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初心者です・・・。 アドバイスよろしくおねがいします。

  • インラインフレームの横スクロールバーを消すには？

    インラインフレームを使用したＨＰから、ＦＣ２ブログを呼び出そうとしています。 すると、必ず横スクロールバーが表示されます。 この横スクロールバーを消したい場合には、どのようにすれば良いでしょう。 ちなみにこのページになります。 http://ee.uuhp.com/~macyako/ ブログのbodyタグに以下を追加しましたが、無理でした。 body { overflow-x: hidden; } あと、インラインフレームの幅を広げてみたりしたのですが無理でした。 ソースが間違ったりしていますか？

  • iframeの横スクロール

    iframeを使ってほかのページを表示させているのですが、 どうしても横スクロールバーが出てしまうのでcssのbody要素に 「overflow-x: hidden;」と入れました。 確かにiframeの横スクロールバーは消えましたが、ページの横スクロールも消えてしまいました。 div idでiframeを囲ってcssでその場所だけに「overflow-x: hidden;」を入れると今度は横スクロールバーが消えません。。 色々調べてみたのですが同じような人がいないようで； 詳しい方教えていただけないでしょうか。 （説明がへたくそですみませんm(_ _)m）

  • スクロールバー

    横に長い画像を表示させる場合表示に限界があればスクロールバーが下に つきますよね？最近疑問に思ったのですが、このスクロールバーはどれぐらいの大きさの画像まで対応(限界)するのでしょうか？また、限界を超えた場合の対処法なんかがあれば教えてください。

  • 横スクロールバー表示時の切り抜き（ペイント）

    ペイントで横に長い画像を切り抜く方法についてです。 1画面に収まらないほど横に長い画像は、ペイントの下部に 横スクロールバーが表示されます。 これをスクロールさせて、やっと端まで画像を見られますが、 この画像を、横幅はほぼそのままで、縦幅だけ狭めて切り抜きたい という時、切り抜きの状態では、スクロールバーを横に移動させる ことができません。 縦であればホイールでなんとかなるのですが…。 切り抜き状態で横にスクロールさせるのは、仕様的に不可能なの でしょうか？ もし可能でしたら、方法を教えてください。

  • Accessの横スクロールバーの動きを検知するには？

    Accessのフォームで表形式の場合 フォームフッターの部分にボタン等を置いた時、横スクロールバーをスライドさせると、そのボタンも横にずれて隠れてしまいます。 横スクロールさせても、フォームフッターに置いたボタン等を、画面上一定の場所に置く方法はないでしょうか？ スルロールバーが動いた時のイベントとかあるといいのですが。

  • tableで横スクロールバーが・・

    tableの高さがブラウザの表示範囲を超えると 少しだけ右の方に空白ができ、 横スクロールバーが出てきて醜い状態になってしまいます。 タグは、大まかにこのような感じで、 外部スタイルシートを適用させていて、 tableには枠線をつけています。 <body scroll="auto"> <table style="width:720px;" class="枠線、パディング、マージン等"> <tr> <td colspan="2" style="background-image:url("***.jpg(720x150pxの画像)"); width:720px;height:150px;"> <a href="リンク">リンク</a> </td> </tr> <td colspan="1" width="100%"> <!メニュー部分> </td> <td colspan="1"> <!本文部分> </td> </tr> <tr> <td> <!著作権表示> </td> </tr> </table> </body> 本文が少なければ、tableの高さがブラウザの表示範囲の中に収まるので 横スクロールバーは出ませんが、 収まらないときには横スクロールバーが出てしまいます。 横スクロールバーを出さないようにするにはどうすればよいのでしょうか？ 分かりにくい箇所があればご指摘をお願いします。 回答をお待ちします。

    • ベストアンサー
    • CSS
  • 複数の画像を横にスクロールさせる方法について

    複数の画像を横にスクロールさせる方法について こちらのサイト（www.japanican.com/index.aspx）の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるのはどのようにすればいいのでしょうか。できれば、CSSとhtmlのタグを教えていただければうれしく思います。 また、横についているボタンだけにするとか、下のスクロール部分だけにするとかも教えて下さい。 よろしくお願いいたします。

  • ブラウザのスクロールバーでスクロール領域を限定したい。

    ブラウザのスクロールバーでスクロール領域を限定したい。 お世話になります。 左に縦長のswf、真ん中にコンテンツ、右に縦長のswfを表示するページを作ろうと 思っています。 そして、swfは表示されてなくてもいいようなものとして、 ブラウザの下の横スクロールバーには、 真ん中のコンテンツの範囲内だけを移動できる横スクロールバーとしたい と思っています。 つまり真ん中のコンテンツが隠れた場合にスクロールバーが出てくるが、 swfが隠れただけでは出てこない、 そして、スクロールバーをめいっぱいスライドしても、コンテンツの端までしか いけず、swfの端まではいかない、というものです。 こういったことがJSかCSSで可能なのでしょうか？ おわかりになる方いらっしゃいましたら、 教えていただけないでしょうか？ お手数をおかけしますが、よろしくお願いします。

  • 複数の画像を横にスクロールさせるボタンについて

    複数の画像を横にスクロールさせるボタンについて こちらのサイト（www.japanican.com/index.aspx）の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるボタンはどのようにすればできますか。Javascriptは扱ったことがないのでわかりやすく教えていただければ助かります。よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する