- ベストアンサー
画像クリックでスクロールバーの色を変える方法
カテゴリー的にここかなと思うので質問させていただきます。 よく画像の素材サイトで 「サンプル画像をクリックすると、背景がその画像に変わる」 というものを見かけますが、 あれと同じ事を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独自仕様」としてのスクロールバー変更のことなのです。 ただ、せっかく頂いた回答なので試してみようと思います。
関連するQ&A
- スクロールバーをカスタマイズするには？
JavaScriptでスクロールバーをカスタマイズすることが出来たかと 思うのですが、どうしてもサンプルが見つかりません。 （cssで色を変えるなどではなく、スクロールバー自体を画像でデザイン し、スクロールバーの働きをさせたいと思っています。） 参考サイトやアドバイスをいただければ幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- デザインされたスクロールバーについてです
いつもお世話になっています。。 デザインされたスクロールバーを使用したくて、 flexcrollというファイルをダウンロードしました。 こちらのサンプルにあるファイルが使用しているものと同じかと思います http://lifescape.seesaa.net/article/51751860.html ファイルは javascriptのflexcroll.jsと cssを2ファイルを使用しています。 こちらでページ内に色を指定したスクロールバーを設置できたのですが、 同じスクロールバーをサイズ違いで、同ページ内に2つ設置したい場合、CSSでは指定が一つしかできないので、同じ大きさのスクロールバーしか設置ができません。 javascriptを2つ用意してCSSのクラス名を変更するれば、同ページ内で2種類のスクロールーが設置できるのか？？ よくわかりません。。 どうかご教授お願い致します。
- ベストアンサー
- HTML
- インラインフレームのスクロールバーの色を変えたい
CSSのbodyタグでスクロールバーの色指定をしました。外部スタイルシートと、head内に書き込むのと二通りで試しましたが、どちらの場合もブラウザのスクロールバーは反映されるのに、インラインフレームのスクロールバーは変わりません。 インラインフレームの変え方をどなたか教えていただけないでしょうか？ ブラウザはIE6.0を使っています。
- ベストアンサー
- ホームページ作成ソフト
- CSSによるスクロールバーの色の反映がされない
CSSによるスクロールバーの色の反映がされないのですが、原因がよく分かりません。 環境 windows2000SP4 IE6.0.2 ソース html,body{ background-color:#FFFFFF; font-size:14px; margin:0px; scrollbar-3dlight-color : #FFFFFF; scrollbar-arrow-color : #336666; scrollbar-base-color : #FFFFFF; scrollbar-darkshadow-color : #FFFFFF; scrollbar-highlight-color : #CCCCCC; scrollbar-shadow-color : #CCCCCC; scrollbar-track-color : #FFFFFF; } 外部CSSを読み込む感じなのですが、他のCSSは反映されているので、外部CSSへのリンクが違うということはないです。 また、おそらくスクロールバーの色を変更しているサイトのスクロールバーを見てもデフォルトの灰色です。 また、IEのインターネットオプションのユーザー設定には何もチェックはいれていません。 何かあやしい点があれば、教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- exciteブログのスクロールバーについて
exciteブログのCSSで元からあった BODY { BACKGROUND : #000000; MARGIN : 30;PADDING : 0; } という部分に BODY { BACKGROUND : #000000; MARGIN : 30;PADDING : 0; scrollbar-base-color:#000000; scrollbar-arrow-color:blue; scrollbar-track-color:#202020;} というスクロールバーに関するCSSの内容を追加しましたが上手く変化してくれません スクロールバーはbodyタグで指定してやればいいとあったのでその通りにしたのですが… ちなみにこの追加した分は他のページ（HTML）で使っているCSSをコピペしてきたもので、ブログ以外のところでは思い通りに変化してくれてます 分かる人はぜひご教授くださいｍ（＿ ＿）ｍ
- ベストアンサー
- ブログ
- スクロールバーの色指定が・・・
久しぶりにホームページの模様替えをしたら、スクロールバーの色指定がHTMLでないときかなくなっていました。 前はBODYでよかったような気がするのですが。 HTML文書で、フレームなしです。 ブラウザはIE6.0です。 自分がなにか余計なものいじくって設定が変わったせいでしょうか・・・？
- ベストアンサー
- HTML
- スクロールバーの幅を取得するには？
対象はIE6～8です。 CSSの overflow-y: scroll; で表示される垂直スクロールバーについてなのですが、 これは対象領域の横幅がスクロールバーの横幅よりも細いと、スクロールできなくなります。 （使用不可のグレー表示になります） ある機能を実現するために、スクロールバーだけを独立して表示させたかったので、 ぎりぎりの横幅（18px）を指定していたのですが、問題が起きました。 デスクトップでの右クリックから開ける「画面のプロパティ」→「デザイン」で、 フォントサイズを変更したり、あるいは詳細設定でDPIを変更すると、 スクロールバーの幅が変わってしまうために、「ぎりぎりの横幅」も変わってしまいます。 それにより、18pxの指定ではグレー表示となり動かせなくなりました。 この解決策を求めています。 現状としては、JavaScriptでスクロールバーの幅を取得できれば、 初期表示時に補正できるので、一番手軽と考えているのですが・・・ よろしくお願い致します。
- ベストアンサー
- JavaScript
- HTMLでテーブル内の背景画像固定方法は？
HTMLでテーブルの背景に画像を指定することは可能ですが、その背景画像を繰り返さないように指定したり、位置を指定したりすることはできるのでしょうか。 CSSではなくHTMLで指定できるのかどうか、また出来るのであればそのサンプルを教えて頂けると助かります。
- 締切済み
- HTML
- スクロールバーの色を変更
サイトのＴＯＰでスクロールバーの色の変更をして、それは出来たのですが… ＴＯＰに更新履歴を表示するテキストエリアボックスのスクロールバーまで色が変わってしまいます。 ここに関しては通常の青いスクロールバーにしたいのですが、どうすればいいのか分かりません…。 スクロールバーの色の変更は<HEAD>内にこれを使いました。 <style type="text/css"> <!-- body { scrollbar-arrow-color:#000; scrollbar-face-color:#90eeaa; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#000; scrollbar-track-color:#fff; scrollbar-shadow-color:#000; scrollbar-darkshadow-color:#fff; } --> </style>
- 締切済み
- HTML
お礼
しかしながら、Chrome向けにスクロールバーカラーが変更できることは初めて知りました。
補足
すみません、スクロールバーの「色」とだけ言ってしまったのが悪かったのかもしれません。 正確には scrollbar-face-color scrollbar-track-color scrollbar-arrow-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-3dlight-color scrollbar-darkshadow-color これらすべての要素をの色を細かく指定しているスクロールバーのことです。 で、これらを変更できるのがIEだけという意味です。