トリック・リポーター

<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("yui", "2.8.2");
</script>
<script type="text/javascript">
new YAHOO.util.YUILoader({
	require: ['colorpicker','fonts'],
	loadOptional: true,
	onSuccess: function() {
		var Event = YAHOO.util.Event;
		Event.onDOMReady(function() {
			picker = new YAHOO.widget.ColorPicker("color_picker", {
				showhsvcontrols: true,
				showhexcontrols: true,
					images: {
						PICKER_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/picker_thumb.png",
						HUE_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/hue_thumb.png"
					}
				});
	
				picker.on("rgbChange", function(o){
						picker.chgValue = o; 
					}
				);
				picker.on("available", function(o){
						// 初期編集不可
						document.getElementById(picker.ID.HEX).setAttribute("readonly","true") 
						document.getElementById(picker.ID.R).setAttribute("readonly","true") 
						document.getElementById(picker.ID.G).setAttribute("readonly","true") 
						document.getElementById(picker.ID.B).setAttribute("readonly","true") 
						document.getElementById(picker.ID.H).setAttribute("readonly","true") 
						document.getElementById(picker.ID.S).setAttribute("readonly","true") 
						document.getElementById(picker.ID.V).setAttribute("readonly","true") 
						picker.chgValue = {};
						picker.chgValue.newValue = [255, 255, 255];
						picker.chgValue.prevValue= [255, 255, 255];
					}
				);
	
				Event.on("reset", "click", function(e) {
					picker.setValue([255, 255, 255], false);
				});
	
				Event.on("gethex1", "click", function(e) {
					alert(picker.get("hex")); 
				});
				Event.on("gethex2", "click", function(e) {
					alert(document.getElementById(picker.ID.HEX).value); 
				});
				Event.on("gethex3", "click", function(e) {
					alert(picker.chgValue.newValue + " : " + picker.chgValue.prevValue); 
				});
		});
	}
}).insert();
</script>

<div class="yui-skin-sam" style='padding:10px;background-color: #eeeeee;width: 420px; height:220px;'>
<div id="color_picker" style='position: relative;'></div>
</div>

<input type="button" id="reset" value="初期値">
<input type="button" id="gethex1" value="RGB表示(1)">
<input type="button" id="gethex2" value="RGB表示(2)">
<input type="button" id="gethex3" value="RGB表示(3)">