色をHEX、RGB、HSBで表示するカラーピッカーjavascript「mooRainbow」に関するコメントはまだありません。
ご遠慮なくコメントしてください。
色をHEX、RGB、HSBで表示するカラーピッカーjavascript「mooRainbow」
Webでの色の指定は16進法を意味するHEXで指定することになります。
しかしHEXはRGBなどと比較すると一般的ではなく、色の指定が難しいことがあります。
mooRainbowというサイトでは、色指定をHEXで簡単に行えるカラーピッカーと呼ばれるjavascriptを公開しています。

使用方法
名前にmooとあるように軽量で有名なjavascriptライブラリ「mootools」が必要になります。
ファイルが重くならない様にダウンロードするコンポーネントが指定されていますが、全部を含めても44kbなので面倒ならば全部を指定してダウンロードしてください。
次にmooRainbowからファイルをダウンロードした後、mooRainbow.jsの17行目のimgPathをimagesディレクトリのフルパスに変更しておきましょう。
さらに、mooRainbow.cssの98、103行目のimgパスも念のためフルパスを指定します。
後はhead内にmootools.js、mooRainbow.js、mooRainbow.cssを挿入し、さらに
<script type="text/javascript">
window.addEvent('domready', function() {
var r = new MooRainbow('myRainbow', { //myRainbowは後で指定するimg idと一緒にすること
'startColor': [58, 142, 246], //最初の色(RGB)
'onChange': function(color) {
$('myinput').value = color.hex; //myinputは後で指定するinput idと一緒にすること
}
});
});
</script>
もheadに内に書き込みます。
最後にHTML内で
<label>
<img id="myRainbow" src="クリック画像パス" alt="カラーピッカー" width="16" height="16">
<input id="myinput" name="myinput" type="text" size="13">
</label>
とすれば作成できます。
色をHEX、RGB、HSBで表示するカラーピッカーjavascript「mooRainbow」サンプル
2007年07月12日
前の記事:Movable Typeの管理ページ用プラグイン
次の記事:Movable TypeでAJAXな投票を可能にするプラグイン「AjaxRating」
関連記事
- [mootools]Color Picker
- 色を選択するカラーピッカーjavascript「Mootools Colo(u)r picker」
- ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
- BOMBERMAN JAVASCRIPT GAME by mootools.js
- [mootools]mooVRotatingMenu
コメント投稿
この記事へのトラックバック:
- jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
- ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
- BOMBERMAN JAVASCRIPT GAME by mootools.js
- 3ステップで表をソート&値を検索できるjavascript「dataTables」
- Movable Type 4.2にバージョンアップ
- ページの目次を自動で作成するjavascript「jqTOC」
- JavaScriptライブラリ「raphael」で図を描く
- ニューデザイン
- Widgetboxで手軽にRSS型ウィジェット(ガジェット)を作る
- 奥から手前にズームするJavaScript「Spacegallery.js」













