説明
http://www.knallgrau.at/code/colorpicker
このライブラリはprototype.js、script.aculo.usを利用しているので、あらかじめ読み込ませておきます。HTML文書ではカラーピッカーを表示する時に必要となるテキストフィールドとID名を指定します。
プログラムではControl.ColorPicker()としてカラーピッカーを表示する際に読み出すテキストフィールドのID名を指定します。2番目のオプションパラメータには、ライブラリが使用するカラーピッカーの画像などが格納されているパスを指定します。
サンプルではカラーピッカーで色を指定すると自動的にテキストフィールドの背景色／値も変化します。
サンプルコード [実行]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" href="colorPicker.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js"></script>
<script type="text/javascript" src="lib/yahoo.color.js"></script>
<script type="text/javascript" src="lib/colorPicker.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>カラーピッカーを表示する</h1>
<form>
<input type="text" id="colorfield" value="FF33FF">
</form>
</body>
</html>
window.onload = function(){
new Control.ColorPicker("colorfield", { IMAGE_BASE : "img/" });
}