Ce script est déclaré obsolète. Il n'est conservé que pour information.

Script : Color Picker via XML

Un autre Color Picker utilisant le XML. Ne fonctionne que sous Internet Explorer

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...

Exécution du script

Code source

<HTML xmlns:IE><HEAD><TITLE>Color picker</TITLE><STYLE>@media all {  IE:Picker  {    behavior: url("xmlcolpic.htc") ;    width : 256;    height : 128;  }}</STYLE></HEAD><BODY><FONT face=arial size=2><CENTER><BIG><B>Color Picker via XML</B></BIG></CENTER><BR>Silver nous propose ici un travail intéressant basé sur plusieurs variations du thème type Color Picker utilisant le XML !<BR>Ce script ne fonctionne que sous Internet Explorer.<BR><BR><BR><table width=100%>    <tr>        <td colspan="2" align="center">            <b>Color picker tout simple...</b>        </td>    </tr>        <td>            <IE:Picker/>        </td>        <td width="100%" style="padding-left:50">            <textarea style="border:0; height:100%; width:100%"><IE:Picker/></textarea>        </td>    </tr>    <tr>        <td colspan="2" align="center">            <b>Petit dévelopement autour d'un color picker...</b>        </td>    </tr>    <tr>        <td >            <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&nbsp;&nbsp;<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&nbsp;&nbsp;<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&nbsp;&nbsp;<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&nbsp;&nbsp;<input type="text" onkeyup="if(this.value!='') changePicker(true)" id="color_red" size="6"><br>                        B&nbsp;&nbsp;<input type="text" onkeyup="if(this.value!='') changePicker(true)" id="color_blu" size="6"><br>                        G&nbsp;&nbsp;<input type="text" onkeyup="if(this.value!='') changePicker(true)" id="color_gre" size="6"><br>                        #&nbsp;&nbsp;<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>        </td>        <td width="100%" style="padding-left:50"><textarea style="border:0; height:300; width:100%"><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&nbsp;&nbsp;<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&nbsp;&nbsp;<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&nbsp;&nbsp;<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&nbsp;&nbsp;<input type="text" onkeyup="if(this.value!='') changePicker(true)" id="color_red" size="6"><br>            B&nbsp;&nbsp;<input type="text" onkeyup="if(this.value!='') changePicker(true)" id="color_blu" size="6"><br>            G&nbsp;&nbsp;<input type="text" onkeyup="if(this.value!='') changePicker(true)" id="color_gre" size="6"><br>            #&nbsp;&nbsp;<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></textarea>        </td>    </tr>    <tr>        <td colspan="2" align="center">            <b>2 colors picker dialogant entre eux...</b>        </td>    </tr>    <tr>        <td>            <IE:Picker oncolor="document.getElementById('cpicker2').tsl=this.tsl" /><br>            <IE:Picker id="cpicker2" genre="2" />        </td>        <td width="100%" style="padding-left:50">            <textarea style="border:0; height:100%; width:100%"><IE:Picker oncolor="document.getElementById('cpicker2').color=this.color" /><br><IE:Picker id="cpicker2" /></textarea>        </td>    </tr></table></BODY></HTML>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...

Script : Color Picker via XML

Exécution du script

Code source

Troisième édition Tout JavaScript chez Dunod

Chercher une fonction, un objet, ...

Le graph des objets JavaScript