- ベストアンサー
テーブル背景色を自由に変えられる
はじめまして。 ホームページ内で、家具やインテリア雑貨の画像を、マウスでドラッグして好きな場所に配置して遊べるものを作っています（よく見かける「着せ替え～」の、模様替えバージョンです）。 テーブルを部屋の壁に見立てて、そのテーブルの背景色を、色に対応したボタンを押すことで変更できるようにしているのですが、もっとカラーピッカーのような、RGBの割合でカラー生成できるようなかんじにしたいと考えております。 当方超がつく初心者で、質問の内容も分かりづらいところがあるかと思いますが、ご存知の方いらっしゃいましたら教えていただきたいです。 宜しくお願いします。
- ueda_y_k
- お礼率100% (24/24)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
望むようなものではないかもしれませんが、ちょっとしたサンプルを作ってみました。 適当にカスタマイズして下さい。 使い方 </table>より下の部分を実際のテーブルの下に置きます。 テーブルには、id="TABLE1" のように適当な名前を付けてやります。 onclick="SetBGCOLOR('TABLE1') の部分と名前を合わせてやります。 ＲＧＢは、各々０～２５５の数値で設定してやります。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>COLOR SETTER</title> <script type="text/javascript"><!-- function DecToHex(){ var red = eval(document.COLORMAKER.RED.value); var green = eval(document.COLORMAKER.GREEN.value); var blue = eval(document.COLORMAKER.BLUE.value); if(red < 0 || 255 < red){ alert("０～２５５の範囲で指定して下さい"); document.COLORMAKER.RED.select(); return false } if(green < 0 || 255 < green){ alert("０～２５５の範囲で指定して下さい"); document.COLORMAKER.GREEN.select(); return false } if(blue < 0 || 255 < blue){ alert("０～２５５の範囲で指定して下さい"); document.COLORMAKER.BLUE.select(); return false } red = red.toString(16); green = green.toString(16); blue = blue.toString(16); if(red.length==1) red = "0" + red; if(green.length==1) green = "0" + green; if(blue.length==1) blue = "0" + blue; var color = ("#"+ red + green + blue).toUpperCase(); document.getElementById("SQUARE").style.color=color; document.COLORMAKER.COLORCODE.value=color; return true; } function SetBGCOLOR(id){ document.getElementById(id).style.backgroundColor=document.COLORMAKER.COLORCODE.value; } //--> </script> </head> <body> <table border="1" id="TABLE1"> <tr><td>A1</td><td>B1</td></tr> <tr><td>A2</td><td>B2</td></tr> </table> <button type="button" onclick="document.getElementById('COLORSETTER').style.display=''">テーブル背景色設定</button> <div id="COLORSETTER" style="display:none;border:ridge 10px #888888;width:260px;background-color:#CCCCCC;margin:5px;padding:5px"> <form name="COLORMAKER"> Ｒ<input type="text" name="RED" value="255" size="4" id="RED" tabindex="1" onchange="return DecToHex()" title="0-255の値を設定"><br> Ｇ<input type="text" name="GREEN" value="255" size="4" id="GREEN" tabindex="2" onchange="return DecToHex()" title="0-255の値を設定"> <span id="SQUARE" style="color:#FFF">■</span>：カラーコード<input type="text" name="COLORCODE" value="#FFFFFF" size="8" ID="RESULT" readonly tabindex="-1"><br> Ｂ<input type="text" name="BLUE" value="255" size="4" id="BLUE" tabindex="3" onchange="return DecToHex()" title="0-255の値を設定"><br> <input type="button" value="設定" onclick="SetBGCOLOR('TABLE1')"> <input type="reset" value="クリア" onclick="document.getElementById('SQUARE').style.color='#FFF'"> <input type="button" value="閉じる" onclick="document.getElementById('COLORSETTER').style.display='none'"> </form> </div> </body> </html>
その他の回答 (3)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#3>私の考えていたスクロールバーは、まさにこんな感じでした！が #3>あまりおすすめではないとのこと・・・了解いたしました。 ＃３のサンプルはＩＥでしか動かないし、CLASSIDで指示される部品がインストールされている必要があります。 何らかの業務アプリで、そのような条件を満たす状況でしか使わないとかそういう場合であれば、アリかも知れません。 後は、java のアプレットを使う(JAVA がインストールされている必要があるので、やはり環境依存だけど、ActiveX よりはるかにまし）方法があると思いますけど、 コンパイルする必要があるので、そのまま動くモノを提供できないですね。（このサイトではファイルのやり取りはできないし・） JAVA のアプレットで検索されてみるといいかもしれません。
お礼
度々のご回答ありがとうございました！ IEでしか動かないのなら、ちょっと問題ですね。 大変参考になりました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>例えばスクロールバーでRGBそれぞれの割合を変えていく・・・みたいな、 スクロールバーは、ＨＴＭＬの部品の中にはないので、 Ｗｉｎｄｏｗｓの部品(ActiveX)を使って実現するか、 それらしいものをdiv とかを使ってドラッグできたりするものを作る必要がありますが、どちらもかなり環境に依存する(ActiveX は特に)ので、できないことはないですが、お薦めできません。 ActiveXを使ってスクロールバーで０～２５５の数値を入力させるサンプル ---------------------------------------------------------------- <HTML> <HEAD> <TITLE>ScrollBar(ActiveX) Sample</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="VBScript"> <!-- Option Explicit Sub Window_OnLoad() End Sub Sub ScrollBar_Change() ScrollBarVal.Value = ScrollBar.Value End Sub Sub ScrollBarVal_OnChange() ScrollBar.Value = ScrollBarVal.Value End Sub --> </SCRIPT> <P> <FONT SIZE=6 >スクロールバー（ＡｃｔｉｖＸコントロール）のサンプル</FONT><BR> <INPUT NAME="ScrollBarVal" TYPE="text" VALUE="128" SIZE="5" READONLY="TRUE"><BR> <OBJECT ID="ScrollBar" WIDTH=240 HEIGHT=23 CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D"> <PARAM NAME="Size" VALUE="3545;580"> <PARAM NAME="Position" VALUE="128"> <PARAM NAME="Max" VALUE="255"> <PARAM NAME="SmallChange" VALUE="1"> <PARAM NAME="LargeChange" VALUE="16"> <PARAM NAME="Orientation" VALUE="1"> </OBJECT> </P> </BODY> </HTML>
お礼
ありがとうございます！！ 私の考えていたスクロールバーは、まさにこんな感じでした！が あまりおすすめではないとのこと・・・了解いたしました。 何も知らずに無理なお願いをしてしまい申し訳ありませんでした。 参考に致します。
- taseki
- ベストアンサー率66% (155/233)
こんなのがありました。 http://www2.gol.com/users/raindogs/takeshi/ezfont/ 「もっとアレコレ」というボタンを押す ↓ 「もっと背景色」ボタン ↓ 「色の作成」ボタン ずいぶん古そうだしブラウザ依存な気がしますが、カラーピッカーということで参考にはなるのでは。
お礼
ご回答ありがとうございました！ ちょっとコピーさせてもらってみたのですが・・・ 私の乏しい知識では、なかなかうまくいじれませんでした・・・。 カラーピッカーはとてもイメージにピッタリなのですが 複雑になると思うのでもっと簡易なものでも十分です。 （前述したように、RGB値だけで調節できるくらい） 参考にさせていただきます。
お礼
早速のご回答、ありがとうございます！！ 素人の私にとっては、す、すごい！の一言です！！ かなり私の考えていたものに近いのですが、 もし、可能であれば、0～255の数値を入力するのではなく 例えばスクロールバーでRGBそれぞれの割合を変えていく・・・みたいな、 カラーコードの知識がない方でも扱いやすい感じで、 というのは作れますでしょうか？ 欲を言って申し訳ありません・・・ また宜しくお願い致します！