Ce script est déclaré obsolète. Il n'est conservé que pour information.
Script : Sélecteur de couleurs via behavior
Un Color Picker comme celui de photoshop ! (Compatible Internet Explorer)
Exécution du script
Code source
<!-- * Fichier: color picker.htc * @version 2.0 * @author Jérémy DERUSSE * @created 11/06/03 * @last update 03/09/03 _____ _ __ / ___/(_) / _____ _____ __ / / / | / / _ / ___/ ___/ / / /| |/ / __/ / /____/_/_/ |___/___/_/--><HTML xmlns:TJS><HEAD><TITLE>Color picker</TITLE><STYLE>@media all { TJS:Picker { behavior: url("color picker.htc") ; width : 256; height : 128; } INPUT { font-family:ms sans serif; font-size:8 } TABLE { font-family:ms sans serif; font-size:8 }}</STYLE></HEAD><BODY style="text-align:center"><BIG>Sélecteur de couleurs via behavior<BR></BIG><BR>Compatible Internet Explorer 5 et +<BR><BR><div style="padding:20; border:2 outset; width:10; background:#D4D0C8"> <table border=0 cellpadding="0" cellspacing="0"> <tr> <td rowspan="3"> <TJS:Picker style="width:310; height:257" id="cpicker" oncolor="changeLocal(this.detail)" color="0000A0" bordersize=2 borderstyle="inset" barWidth=25 spacing="10" /><br> </td> <td valign="top" align="left" colspan="2"> <span style="height:60;width:70px;border:2px inset;border-right:none" onclick="colorPicker.color=this.style.backgroundColor" id="showDyn"></span> <span style="height:60;width:70px;border:2px inset;border-left:none; background-color:#0000A0" onclick="colorPicker.color=this.style.backgroundColor" id="showOld"></span> </td> </tr> <tr> <td valign="top" align="center" colspan="2"> <input type="button" style="width:60" onclick="alert('couleur choisie :n#'+colorPicker.color.toUpperCase())" value="Ok"> <input type="button" style="width:60" onclick="colorPicker.color=showOld.style.backgroundColor" value="Cancel"> </td> </tr> <tr> <td valign="bottom"> <table border=0 cellpadding="0" cellspacing="0" width=100%> <tr> <td> <input type="radio" checked name="genre" onclick="colorPicker.genre=1"> </td> <td> T </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(1)" id="color_H" size="4">° </td> <td> L </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(3)" id="color_L" size="4"> </td> </tr> <tr> <td> <input type="radio" name="genre" onclick="colorPicker.genre=2"> </td> <td> S </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(1)" id="color_S" size="4">% </td> <td> A </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(3)" id="color_A" size="4"> </td> </tr> <tr> <td> <input type="radio" name="genre" onclick="colorPicker.genre=3"> </td> <td> V </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(1)" id="color_V" size="4">% </td> <td> B </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(3)" id="color_B" size="4"> </td> </tr> <tr style="padding-top:10"> <td> <input type="radio" name="genre" onclick="colorPicker.genre=4"> </td> <td> R </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(2)" id="color_red" size="4"> </td> <td> C </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(4)" id="color_C" size="4"> </td> </tr> <tr> <td> <input type="radio" name="genre" onclick="colorPicker.genre=5"> </td> <td> G </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(2)" id="color_gre" size="4"> </td> <td> M </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(4)" id="color_M" size="4"> </td> </tr> <tr> <td> <input type="radio" name="genre" onclick="colorPicker.genre=6"> </td> <td> B </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(2)" id="color_blu" size="4"> </td> <td> Y </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(4)" id="color_Y" size="4"> </td> </tr> <tr> <td> </td> <td> # </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(0)" id="color_hex" size="7"> </td> <td> K </td> <td> <input type="text" onkeyup="if(this.value!='') changePicker(4)" id="color_K" size="4"> </td> </tr> </table> </td> </tr> <tr> <td colspan="2"> Créé par Silver © </td> </tr> </table></div> <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][0] document.getElementById("color_gre").value=detail[1][1] document.getElementById("color_blu").value=detail[1][2] document.getElementById("color_H").value=detail[2][0] document.getElementById("color_S").value=detail[2][1] document.getElementById("color_V").value=detail[2][2] document.getElementById("color_L").value=detail[3][0] document.getElementById("color_A").value=detail[3][1] document.getElementById("color_B").value=detail[3][2] document.getElementById("color_C").value=detail[4][0] document.getElementById("color_M").value=detail[4][1] document.getElementById("color_Y").value=detail[4][2] document.getElementById("color_K").value=detail[4][3] } function changePicker(mode) { switch(mode) { case 0: colorPicker.color=document.getElementById("color_hex").value break case 1: colorPicker.hsv=[document.getElementById("color_H").value,document.getElementById("color_S").value,document.getElementById("color_V").value] break case 2: colorPicker.rgb=[document.getElementById("color_red").value,document.getElementById("color_gre").value,document.getElementById("color_blu").value] break case 3: colorPicker.lab=[document.getElementById("color_L").value,document.getElementById("color_A").value,document.getElementById("color_B").value] break case 4: colorPicker.cmyk=[document.getElementById("color_C").value,document.getElementById("color_M").value,document.getElementById("color_Y").value,document.getElementById("color_K").value] break } } 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></BODY></HTML>
Troisième édition Tout JavaScript chez Dunod
En savoir plusSortie le 4 janvier 2023
Version papier 29€90
Format électronique 22€99.
Commandez en ligneLe graph des objets JavaScript
Chargement
en cours...
