Color picker

Color Picker via XML
Silver nous propose ici un travail intéressant basé sur plusieurs variations du thème type Color Picker utilisant le XML !
Ce script ne fonctionne que sous Internet Explorer.

Color picker tout simple...

Petit dévelopement autour d'un color picker...

Espacement epaisseur des Bordures Largeur de la barre Type de bordures
	T ° S % L %	R B G #

<table border=0 cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2">
<IE:Picker style="width:310; height:257" id="cpicker" oncolor="changeLocal(this.detail)"  color="0000A0" bordersize=1 borderstyle="solid #0000FF" barWidth=25 spacing="25" /><br>
			<input type="text" onkeyup="colorPicker.spacing=(this.value.length==0?0:this.value)" value="25"> Espacement<br>
			<input type="text" onkeyup="colorPicker.borderSize=(this.value.length==0?0:this.value)" value="1"> epaisseur des Bordures<br>
			<input type="text" onkeyup="colorPicker.barWidth=(this.value.length==0?0:this.value)" value="25"> Largeur de la barre<br>
			<select onchange="this.onclick()" onclick="colorPicker.borderStyle=this.value">
				<option value="solid #0000FF">solid #0000FF
				<option value="inset">inset
				<option value="outset">outset
				<option value="groove">groove
			</select>Type de bordures<br>
		</td>
	</tr>
	<tr>
		<td valign="top">
			<span style="height:100;width:50px;border:2px inset;border-right:none" onclick="colorPicker.color=this.style.backgroundColor" id="showDyn"></span>
			<span style="height:100;width:50px;border:2px inset;border-left:none; background-color:#0000A0" onclick="colorPicker.color=this.style.backgroundColor" id="showOld"></span>
		</td>
		<td style="font-size:9"  valign="top" align="left">
			<input type="radio" checked name="genre" onclick="colorPicker.genre=1">T  <input type="text" onkeyup="if(this.value!='') changePicker(false)" id="color_T" size="3">°<br>
			<input type="radio" name="genre" onclick="colorPicker.genre=2">S  <input type="text" onkeyup="if(this.value!='') changePicker(false)" id="color_S" size="3">%<br>
			<input type="radio" name="genre" onclick="colorPicker.genre=3">L  <input type="text" onkeyup="if(this.value!='') changePicker(false)" id="color_L" size="3">%<br>
		</td>
		<td style="font-size:9"  valign="top" align="right">
			R  <input type="text" onkeyup="if(this.value!='') changePicker(true)" id="color_red" size="6"><br>
			B  <input type="text" onkeyup="if(this.value!='') changePicker(true)" id="color_blu" size="6"><br>
			G  <input type="text" onkeyup="if(this.value!='') changePicker(true)" id="color_gre" size="6"><br>
			#  <input type="text" onkeyup="if(this.value!='') changePicker(true, this.value)" id="color_hex" size="6"><br>
		</td>
	</tr>
</table>
<script>
	function changeLocal(detail)
	{
		document.getElementById("color_hex").value=detail[0].toUpperCase()
		document.getElementById("showDyn").style.backgroundColor=detail[0]
		document.getElementById("color_red").value=detail[1]
		document.getElementById("color_gre").value=detail[2]
		document.getElementById("color_blu").value=detail[3]
		document.getElementById("color_T").value=detail[4]
		document.getElementById("color_S").value=detail[5]
		document.getElementById("color_L").value=detail[6]
	}

function changePicker(RGB, color)
	{
		if(!color)
		{
			if(RGB)
			{
				var r = IntToHex(parseInt(document.getElementById("color_red").value))
				var g = IntToHex(parseInt(document.getElementById("color_gre").value))
				var b = IntToHex(parseInt(document.getElementById("color_blu").value))
				var c = r+g+b
				colorPicker.color=c
			}
			else
				colorPicker.tsl=[document.getElementById("color_T").value,document.getElementById("color_S").value,document.getElementById("color_L").value]
		}
		else
			colorPicker.color=color
	}

function IntToHex(val)
	{
		val = (val<0?0:val>255?255:val).toString(16)
		return val.length>1?val:"0"+val
	}

colorPicker=document.getElementById("cpicker")
</script>

2 colors picker dialogant entre eux...