- ベストアンサー
画像クリックでスクロールバーの色を変える方法
カテゴリー的にここかなと思うので質問させていただきます。 よく画像の素材サイトで 「サンプル画像をクリックすると、背景がその画像に変わる」 というものを見かけますが、 あれと同じ事をCSSのスクロールバーのカラー指定に対してやってみたいのです。 つまり、スクロールバーのサンプル画像をクリックすると、そのページ自体のスクロールバーが変わっていくというもの。 スクロールバーの色がIEでしか変わらない事は存じております。 私はHTMLとCSSの理解は深い方ですが、JavaScriptはほとんどわかりません。 よろしくお願いします。
- morie2012
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTML/CSSはご存知でしょうか。 webkitとIEでは、CSSの記述が変わるだけで、やることは同じですよ。 body.scrollRed{ scrollbar-face-color:#f00; } body.scrollRed::-webkit-scrollbar-thumb｛ background:#f00; } 上記のように記述して、bodyにscrollRedというクラスをあてれば、webkitでもIEでも赤色のスクロールバーになります。ご存知とは思いますが、この部分はCSSだけでできることです。 質問内容は、画像クリックで変更したいとのことでしたので、先にご紹介したJSのサンプルは、画像をクリックすることで、後からbodyに任意のクラスを与えて、結果、スクロールバーを変更する方法です。
その他の回答 (1)
- tracer
- ベストアンサー率41% (255/621)
簡単なのでjquery前提でいきます。 jqueryが分からないとか、JavaScriptをそもそもどこに書けばいいかとか、そのへんの基本はじっくり調べてみてください。 基本的には検索すればすぐに出ます。 以下はbodyのスクロールバーを変更するサンプルです。あらかじめスクロールバーにあてるスタイルをクラスで用意し、画像クリックで、bodyにクラスを与える方法です。 HTML <body> <img src="1.jpg" class="chgScrollbar" alt="サンプル1" rel="sample1"> <img src="2.jpg" class="chgScrollbar" alt="サンプル2" rel="sample2"> </body> CSS .sample1{ background:#f00; } .sample2{ background:#f0f; } JavaScript $('.chgScrollbar').click(function(){$('body').attr("class",$(this).attr("rel"))}); たったこれだけでいけますよ。 ちなみに、スクロールバーの変更は、IE以外にもwebkit系のブラウザ(chrome、safari)でもできますよ。
お礼
すみません、 http://zumirin.cool.ne.jp/kowaza/scrollbar.htm です。最後のlが余計でした。
補足
ご回答ありがとうございます …が、webkit系のブラウザでも出来るという所で引っかかります。 ちょっと違うかもしれません。 自分の言っているスクロールバーカラーの変更とは、 http://zumirin.cool.ne.jp/kowaza/scrollbar.html こちらのページにあるような「IE独自仕様」としてのスクロールバー変更のことなのです。 ただ、せっかく頂いた回答なので試してみようと思います。
お礼
しかしながら、Chrome向けにスクロールバーカラーが変更できることは初めて知りました。
補足
すみません、スクロールバーの「色」とだけ言ってしまったのが悪かったのかもしれません。 正確には scrollbar-face-color scrollbar-track-color scrollbar-arrow-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-3dlight-color scrollbar-darkshadow-color これらすべての要素をの色を細かく指定しているスクロールバーのことです。 で、これらを変更できるのがIEだけという意味です。