Wall posté le Vendredi 13 avril 2007


no soucy ; )


  1. <html>
  2.  
  3. <title>Sélecteur de couleurs interactif</title>
  4. <script language="JavaScript">
  5.  
  6. <!--
  7.  
  8. function SymError()
  9.  
  10. {
  11.  
  12. return true;
  13.  
  14. }
  15.  
  16. window.onerror = SymError;
  17.  
  18. //-->
  19.  
  20. </script>
  21.  
  22. <SCRIPT LANGUAGE="JavaScript">
  23.  
  24. function genColor() {
  25.  
  26. hex = document.colorForm.hex.value;
  27.  
  28. if(hex.length == 7) {
  29.  
  30. hex = hex.substring(1);
  31.  
  32. }
  33.  
  34. if(hex.length > 7 || hex.length < 6) {
  35.  
  36. alert("Invalid Hex Value");
  37.  
  38. }
  39.  
  40. hex = hex.toUpperCase();
  41.  
  42. red = hex.substring(0,2);
  43.  
  44. green = hex.substring(2,4);
  45.  
  46. blue = hex.substring(4,6);
  47.  
  48. addToLists(red, green, blue);
  49.  
  50. if(hex.length == 6){
  51.  
  52. hex = "#" + hex;
  53.  
  54. }
  55.  
  56. document.bgColor = hex;
  57.  
  58. document.colorForm.hex.value = hex;
  59.  
  60. }
  61.  
  62. function genHex() {
  63.  
  64. if(document.colorForm.Red.selectedIndex == -1) {
  65.  
  66. document.colorForm.Red.selectedIndex = 0;
  67.  
  68. }
  69.  
  70. if(document.colorForm.Green.selectedIndex == -1) {
  71.  
  72. document.colorForm.Green.selectedIndex = 0;
  73.  
  74. }
  75.  
  76. if(document.colorForm.Blue.selectedIndex == -1) {
  77.  
  78. document.colorForm.Blue.selectedIndex = 0;
  79.  
  80. }
  81.  
  82. red = document.colorForm.Red[document.colorForm.Red.selectedIndex].value;
  83.  
  84. green = document.colorForm.Green[document.colorForm.Green.selectedIndex].value;
  85.  
  86. blue = document.colorForm.Blue[document.colorForm.Blue.selectedIndex].value;
  87.  
  88. hex = "#" + red + green + blue;
  89.  
  90. document.colorForm.hex.value = hex;
  91.  
  92. document.bgColor = hex;
  93.  
  94. }
  95.  
  96. function setColor() {
  97.  
  98. hexIndex = document.colorForm.colorList.selectedIndex;
  99.  
  100. hex = document.colorForm.colorList[hexIndex].value;
  101.  
  102. hex = hex.toUpperCase();
  103.  
  104. document.bgColor = "#" + hex;
  105.  
  106. document.colorForm.hex.value = "#" + hex;
  107.  
  108. red = hex.substring(0,2);
  109.  
  110. green = hex.substring(2,4);
  111.  
  112. blue = hex.substring(4,6);
  113.  
  114. document.colorForm.Red.value = red;
  115.  
  116. document.colorForm.Green.value = green;
  117.  
  118. document.colorForm.Blue.value = blue;
  119.  
  120. addToLists(red, green, blue);
  121.  
  122. }
  123.  
  124. function addToLists(red, green, blue) {
  125.  
  126. si = -1;
  127.  
  128. for(i = 0 ; i < 3 ; i++) {
  129.  
  130. if(i == 0) {
  131.  
  132. curColor = red;
  133.  
  134. }
  135.  
  136. if(i == 1) {
  137.  
  138. curColor = green;
  139.  
  140. }
  141.  
  142. if(i == 2) {
  143.  
  144. curColor = blue;
  145.  
  146. }
  147.  
  148. if(curColor == '00') { si = 0; }
  149.  
  150. if(curColor == '11') { si = 1; }
  151.  
  152. if(curColor == '22') { si = 2; }
  153.  
  154. if(curColor == '33') { si = 3; }
  155.  
  156. if(curColor == '44') { si = 4; }
  157.  
  158. if(curColor == '55') { si = 5; }
  159.  
  160. if(curColor == '66') { si = 6; }
  161.  
  162. if(curColor == '77') { si = 7; }
  163.  
  164. if(curColor == '88') { si = 8; }
  165.  
  166. if(curColor == '99') { si = 9; }
  167.  
  168. if(curColor == 'AA') { si = 10; }
  169.  
  170. if(curColor == 'BB') { si = 11; }
  171.  
  172. if(curColor == 'CC') { si = 12; }
  173.  
  174. if(curColor == 'DD') { si = 13; }
  175.  
  176. if(curColor == 'EE') { si = 14; }
  177.  
  178. if(curColor == 'FF') { si = 15; }
  179.  
  180. if(i == 0) {
  181.  
  182. document.colorForm.Red.selectedIndex = si;
  183.  
  184. }
  185.  
  186. if(i == 1) {
  187.  
  188. document.colorForm.Green.selectedIndex = si;
  189.  
  190. }
  191.  
  192. if(i == 2) {
  193.  
  194. document.colorForm.Blue.selectedIndex = si;
  195.  
  196. }
  197.  
  198. }
  199.  
  200. }
  201.  
  202. </SCRIPT>
  203.  
  204. </head>
  205.  
  206. <body bgcolor="#FFFFFF" link="#9B022D" vlink="#336991" alink="#007171">
  207.  
  208. <form name="colorForm">
  209.  
  210. <div align="center">
  211.  
  212. <div align="center">
  213.  
  214. <center>
  215.  
  216. <table border="0" cellpadding="4" cellspacing="0" width="500">
  217.  
  218. <tr>
  219.  
  220. <td colspan="4" align="left">
  221.  
  222. <p align="center"><font face="Verdana,Arial,Helvetica" size="5">Sélecteur
  223.  
  224. de couleur</font>
  225.  
  226. <p align="left"><font face="Verdana,Arial,Helvetica" size="2">Cet
  227.  
  228. outil permet d'obtenir la couleur désirée en modifiant les paramètres
  229.  
  230. des 3 composantes Rouge, Vert et Bleu.</font>
  231.  
  232. <p align="left">&nbsp;</td>
  233.  
  234. </tr>
  235.  
  236. <center>
  237.  
  238. <tr>
  239.  
  240. <td><b><font size="2" face="Arial, Helvetica">Couleurs
  241.  
  242. par nom</font></b></td>
  243.  
  244. <td><b><font size="2" face="Arial, Helvetica" color="#FF0000">Rouge</font></b></td>
  245.  
  246. <td><b><font size="2" face="Arial, Helvetica" color="#00FF00">Vert</font></b></td>
  247.  
  248. <td><b><font size="2" face="Arial, Helvetica" color="#0000FF">Bleu</font></b></td>
  249.  
  250. </tr>
  251.  
  252. <tr>
  253.  
  254. <td><font color="#FFFFFF" size="2">
  255.  
  256. <select size="16" name="colorList" onChange="setColor()">
  257.  
  258. <option value="000000" selected>Black</option>
  259.  
  260. <option value="FFFFFF">White</option>
  261.  
  262. <option value="990000">Red</option>
  263.  
  264. <option value="009900">Green</option>
  265.  
  266. <option value="000099">Blue</option>
  267.  
  268. <option value="FF9900">Orange</option>
  269.  
  270. <option value="660066">Purple</option>
  271.  
  272. <option value="FFFF00">Yellow</option>
  273.  
  274. <option value="FF99CC">Pink</option>
  275.  
  276. <option value="996633">Brown</option>
  277.  
  278. <option value="FFFFCC">Beige</option>
  279.  
  280. <option value="660000">Dark Red</option>
  281.  
  282. <option value="006600">Dark Green</option>
  283.  
  284. <option value="000066">Dark Blue</option>
  285.  
  286. <option value="330000">Very Dark Red</option>
  287.  
  288. <option value="003300">Very Dark Green</option>
  289.  
  290. <option value="000033">Very Dark Blue</option>
  291.  
  292. <option value="CC0000">Bright Red</option>
  293.  
  294. <option value="00CC00">Bright Green</option>
  295.  
  296. <option value="0000CC">Bright Blue</option>
  297.  
  298. <option value="FF0000">Very Bright Red</option>
  299.  
  300. <option value="00FF00">Very Bright Green</option>
  301.  
  302. <option value="0000FF">Very Bright Blue</option>
  303.  
  304. <option value="333333">Very Dark Grey</option>
  305.  
  306. <option value="666666">Dark Grey</option>
  307.  
  308. <option value="999999">Grey</option>
  309.  
  310. <option value="CCCCCC">Light Grey</option>
  311.  
  312. <option value="003333">Dark Turquois</option>
  313.  
  314. <option value="006666">Turquois</option>
  315.  
  316. <option value="009999">Light Turquois</option>
  317.  
  318. <option value="00FFFF">Cyan</option>
  319.  
  320. <option value="00CCCC">Dark Cyan</option>
  321.  
  322. <option value="003366">Soft Dark Blue</option>
  323.  
  324. <option value="003399">Soft Blue</option>
  325.  
  326. <option value="006699">Teal</option>
  327.  
  328. <option value="0099FF">Baby Blue</option>
  329.  
  330. <option value="0066FF">Dark Baby Blue</option>
  331.  
  332. <option value="006633">Forest Green</option>
  333.  
  334. <option value="009933">Soft Green</option>
  335.  
  336. <option value="00FFCC">Seafoam Green</option>
  337.  
  338. <option value="330033">Dark Purple</option>
  339.  
  340. <option value="990099">Light Purple</option>
  341.  
  342. <option value="CC00CC">Dark Magenta</option>
  343.  
  344. <option value="FF00FF">Magenta</option>
  345.  
  346. <option value="CCCC00">Dark Yellow</option>
  347.  
  348. <option value="CCFF00">Yellow Green</option>
  349.  
  350. <option value="99FF00">Green Yellow</option>
  351.  
  352. <option value="FFCC00">Yellow Orange</option>
  353.  
  354. <option value="CC6600">Dark Orange</option>
  355.  
  356. <option value="FF6699">Carnation Pink</option>
  357.  
  358. <option value="FF9999">Light Red</option>
  359.  
  360. <option value="FF66CC">Fushia</option>
  361.  
  362. <option value="330066">Indigo</option>
  363.  
  364. <option value="667700">&quot;Doo Doo&quot; Green</option>
  365.  
  366. &nbsp;
  367.  
  368. </select></font></td>
  369.  
  370. <td><font color="#FFFFFF" size="2"><select size="16" name="Red" onChange="genHex()" onBlur="genHex()" scrolling="no">
  371.  
  372. <option value="00" selected>00</option>
  373.  
  374. <option value="11">11</option>
  375.  
  376. <option value="22">22</option>
  377.  
  378. <option value="33">33</option>
  379.  
  380. <option value="44">44</option>
  381.  
  382. <option value="55">55</option>
  383.  
  384. <option value="66">66</option>
  385.  
  386. <option value="77">77</option>
  387.  
  388. <option value="88">88</option>
  389.  
  390. <option value="99">99</option>
  391.  
  392. <option value="AA">AA</option>
  393.  
  394. <option value="BB">BB</option>
  395.  
  396. <option value="CC">CC</option>
  397.  
  398. <option value="DD">DD</option>
  399.  
  400. <option value="EE">EE</option>
  401.  
  402. <option value="FF">FF</option>
  403.  
  404. </select></font></td>
  405.  
  406. <td><font color="#FFFFFF" size="2"><select size="16" name="Green" onChange="genHex()" onBlur="genHex()"scrolling="no">
  407.  
  408. <option value="00" selected>00</option>
  409.  
  410. <option value="11">11</option>
  411.  
  412. <option value="22">22</option>
  413.  
  414. <option value="33">33</option>
  415.  
  416. <option value="44">44</option>
  417.  
  418. <option value="55">55</option>
  419.  
  420. <option value="66">66</option>
  421.  
  422. <option value="77">77</option>
  423.  
  424. <option value="88">88</option>
  425.  
  426. <option value="99">99</option>
  427.  
  428. <option value="AA">AA</option>
  429.  
  430. <option value="BB">BB</option>
  431.  
  432. <option value="CC">CC</option>
  433.  
  434. <option value="DD">DD</option>
  435.  
  436. <option value="EE">EE</option>
  437.  
  438. <option value="FF">FF</option>
  439.  
  440. </select></font></td>
  441.  
  442. <td><font color="#FFFFFF" size="2"><select size="16" name="Blue" onChange="genHex()" onBlur="genHex()" scrolling="no">
  443.  
  444. <option value="00" selected>00</option>
  445.  
  446. <option value="11">11</option>
  447.  
  448. <option value="22">22</option>
  449.  
  450. <option value="33">33</option>
  451.  
  452. <option value="44">44</option>
  453.  
  454. <option value="55">55</option>
  455.  
  456. <option value="66">66</option>
  457.  
  458. <option value="77">77</option>
  459.  
  460. <option value="88">88</option>
  461.  
  462. <option value="99">99</option>
  463.  
  464. <option value="AA">AA</option>
  465.  
  466. <option value="BB">BB</option>
  467.  
  468. <option value="CC">CC</option>
  469.  
  470. <option value="DD">DD</option>
  471.  
  472. <option value="EE">EE</option>
  473.  
  474. <option value="FF">FF</option>
  475.  
  476. </select>
  477.  
  478. </font></td>
  479.  
  480. </tr>
  481.  
  482. </center>
  483.  
  484. <tr>
  485.  
  486. <td colspan="4">
  487.  
  488. <p align="left">&nbsp;<p align="left"><b>
  489.  
  490. <p><font face="Arial, Helvetica" size="2">Valeur en hexadécimal :<font size="2">&nbsp;&nbsp;&nbsp;&nbsp;
  491.  
  492. <font face="Verdana,Arial,Helvetica">
  493.  
  494. <input type="text" name="hex" size="9" value="#FFFFFF">
  495.  
  496. </font></font> </font><font face="Verdana,Arial,Helvetica" size="2">
  497.  
  498. </font><font face="Arial, Helvetica" size="2"><font size="2">
  499.  
  500. <input type="button" value="Afficher la couleur" name="B1" onClick="genColor()">
  501.  
  502. </font><br>
  503.  
  504. </font></p>
  505.  
  506. <p align="right"><font size="2" face="Arial, Helvetica">By <a href="http://www.grenadine.net" target="_blank">Grenadine.net</a></font></p></td>
  507.  
  508. </tr>
  509.  
  510. </table>
  511.  
  512. </div>
  513.  
  514. </div>
  515.  
  516. </form>
  517.  
  518. </body>
  519.  
  520. </html> 

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Bretagne - php - Moto - Kit graphique