Farbauswahl

HTML-Einbindung
<!-- Script-Anfang --> <!-- www-java24.net - DIE Javascript - Ressource --> <!-- Diesen Code musst Du in den -head- einbauen --> <script language="JavaScript"> /* SL Color Picker A DOM based color picker Copyright (C) 2003 Spiderlab License: GNU General Public License */ //Input field for the hex value for the selected color var hexField = 'hexValue'; //Input field for the red value for the selected color var rField = 'rValue'; //Input field for the green value for the selected color var gField = 'gValue'; //Input field for the blue value for the selected color var bField = 'bValue'; var prevTD; var colors = new Array(); colors[0] = '#000000'; colors[1] = '#000033'; colors[2] = '#000066'; colors[3] = '#000099'; colors[4] = '#0000cc'; colors[5] = '#0000ff'; colors[6] = '#003300'; colors[7] = '#003333'; colors[8] = '#003366'; colors[9] = '#003399'; colors[10] = '#0033cc'; colors[11] = '#0033ff'; colors[12] = '#006600'; colors[13] = '#006633'; colors[14] = '#006666'; colors[15] = '#006699'; colors[16] = '#0066cc'; colors[17] = '#0066ff'; colors[18] = '#009900'; colors[19] = '#009933'; colors[20] = '#009966'; colors[21] = '#009999'; colors[22] = '#0099cc'; colors[23] = '#0099ff'; colors[24] = '#00cc00'; colors[25] = '#00cc33'; colors[26] = '#00cc66'; colors[27] = '#00cc99'; colors[28] = '#00cccc'; colors[29] = '#00ccff'; colors[30] = '#00ff00'; colors[31] = '#00ff33'; colors[32] = '#00ff66'; colors[33] = '#00ff99'; colors[34] = '#00ffcc'; colors[35] = '#00ffff'; colors[36] = '#330000'; colors[37] = '#330033'; colors[38] = '#330066'; colors[39] = '#330099'; colors[40] = '#3300cc'; colors[41] = '#3300ff'; colors[42] = '#333300'; colors[43] = '#333333'; colors[44] = '#333366'; colors[45] = '#333399'; colors[46] = '#3333cc'; colors[47] = '#3333ff'; colors[48] = '#336600'; colors[49] = '#336633'; colors[50] = '#336666'; colors[51] = '#336699'; colors[52] = '#3366cc'; colors[53] = '#3366ff'; colors[54] = '#339900'; colors[55] = '#339933'; colors[56] = '#339966'; colors[57] = '#339999'; colors[58] = '#3399cc'; colors[59] = '#3399ff'; colors[60] = '#33cc00'; colors[61] = '#33cc33'; colors[62] = '#33cc66'; colors[63] = '#33cc99'; colors[64] = '#33cccc'; colors[65] = '#33ccff'; colors[66] = '#33ff00'; colors[67] = '#33ff33'; colors[68] = '#33ff66'; colors[69] = '#33ff99'; colors[70] = '#33ffcc'; colors[71] = '#33ffff'; colors[72] = '#660000'; colors[73] = '#660033'; colors[74] = '#660066'; colors[75] = '#660099'; colors[76] = '#6600cc'; colors[77] = '#6600ff'; colors[78] = '#663300'; colors[79] = '#663333'; colors[80] = '#663366'; colors[81] = '#663399'; colors[82] = '#6633cc'; colors[83] = '#6633ff'; colors[84] = '#666600'; colors[85] = '#666633'; colors[86] = '#666666'; colors[87] = '#666699'; colors[88] = '#6666cc'; colors[89] = '#6666ff'; colors[90] = '#669900'; colors[91] = '#669933'; colors[92] = '#669966'; colors[93] = '#669999'; colors[94] = '#6699cc'; colors[95] = '#6699ff'; colors[96] = '#66cc00'; colors[97] = '#66cc33'; colors[98] = '#66cc66'; colors[99] = '#66cc99'; colors[100] = '#66cccc'; colors[101] = '#66ccff'; colors[102] = '#66ff00'; colors[103] = '#66ff33'; colors[104] = '#66ff66'; colors[105] = '#66ff99'; colors[106] = '#66ffcc'; colors[107] = '#66ffff'; colors[108] = '#990000'; colors[109] = '#990033'; colors[110] = '#990066'; colors[111] = '#990099'; colors[112] = '#9900cc'; colors[113] = '#9900ff'; colors[114] = '#993300'; colors[115] = '#993333'; colors[116] = '#993366'; colors[117] = '#993399'; colors[118] = '#9933cc'; colors[119] = '#9933ff'; colors[120] = '#996600'; colors[121] = '#996633'; colors[122] = '#996666'; colors[123] = '#996699'; colors[124] = '#9966cc'; colors[125] = '#9966ff'; colors[126] = '#999900'; colors[127] = '#999933'; colors[128] = '#999966'; colors[129] = '#999999'; colors[130] = '#9999cc'; colors[131] = '#9999ff'; colors[132] = '#99cc00'; colors[133] = '#99cc33'; colors[134] = '#99cc66'; colors[135] = '#99cc99'; colors[136] = '#99cccc'; colors[137] = '#99ccff'; colors[138] = '#99ff00'; colors[139] = '#99ff33'; colors[140] = '#99ff66'; colors[141] = '#99ff99'; colors[142] = '#99ffcc'; colors[143] = '#99ffff'; colors[144] = '#cc0000'; colors[145] = '#cc0033'; colors[146] = '#cc0066'; colors[147] = '#cc0099'; colors[148] = '#cc00cc'; colors[149] = '#cc00ff'; colors[150] = '#cc3300'; colors[151] = '#cc3333'; colors[152] = '#cc3366'; colors[153] = '#cc3399'; colors[154] = '#cc33cc'; colors[155] = '#cc33ff'; colors[156] = '#cc6600'; colors[157] = '#cc6633'; colors[158] = '#cc6666'; colors[159] = '#cc6699'; colors[160] = '#cc66cc'; colors[161] = '#cc66ff'; colors[162] = '#cc9900'; colors[163] = '#cc9933'; colors[164] = '#cc9966'; colors[165] = '#cc9999'; colors[166] = '#cc99cc'; colors[167] = '#cc99ff'; colors[168] = '#cccc00'; colors[169] = '#cccc33'; colors[170] = '#cccc66'; colors[171] = '#cccc99'; colors[172] = '#cccccc'; colors[173] = '#ccccff'; colors[174] = '#ccff00'; colors[175] = '#ccff33'; colors[176] = '#ccff66'; colors[177] = '#ccff99'; colors[178] = '#ccffcc'; colors[179] = '#ccffff'; colors[180] = '#ff0000'; colors[181] = '#ff0033'; colors[182] = '#ff0066'; colors[183] = '#ff0099'; colors[184] = '#ff00cc'; colors[185] = '#ff00ff'; colors[186] = '#ff3300'; colors[187] = '#ff3333'; colors[188] = '#ff3366'; colors[189] = '#ff3399'; colors[190] = '#ff33cc'; colors[191] = '#ff33ff'; colors[192] = '#ff6600'; colors[193] = '#ff6633'; colors[194] = '#ff6666'; colors[195] = '#ff6699'; colors[196] = '#ff66cc'; colors[197] = '#ff66ff'; colors[198] = '#ff9900'; colors[199] = '#ff9933'; colors[200] = '#ff9966'; colors[201] = '#ff9999'; colors[202] = '#ff99cc'; colors[203] = '#ff99ff'; colors[204] = '#ffcc00'; colors[205] = '#ffcc33'; colors[206] = '#ffcc66'; colors[207] = '#ffcc99'; colors[208] = '#ffcccc'; colors[209] = '#ffccff'; colors[210] = '#ffff00'; colors[211] = '#ffff33'; colors[212] = '#ffff66'; colors[213] = '#ffff99'; colors[214] = '#ffffcc'; colors[215] = '#ffffff'; colors[216] = '#333333'; colors[217] = '#666666'; colors[218] = '#999999'; colors[219] = '#cccccc'; function createTable(cols) { var tbl = '<table id="colorTable" cols="' + colors.length + '" border="0" cellspacing="0" cellpadding="0">'; var tr = '</tr><tr>\n'; var ctbl = '</tr>\n</table>'; var colums = cols; document.write(tbl); for (t = 0; t < colors.length; t++) { var mod = t % colums; if (t > 0 && mod == 0) { document.write(tr); } document.write('<td id="c'+t+'" style="width: 8px; height: 8px; background:' + colors[t] + '; border:none; padding:1px; font-size:1px;" class="setCursor" onClick="JavaScript: setHighlight(this.id); getValues(\''+colors[t]+'\');"> </td>'); } document.write(ctbl); } function cutHex(h) { return (h.charAt(0)=="#") ? h.substring(1,7) : h } function setPreviewColor(HexValue) { document.getElementById('colBgPreview').style.background = HexValue; } function setHighlight(whichTD) { if (prevTD) { document.getElementById(prevTD).style.borderWidth = ''; document.getElementById(prevTD).style.borderStyle = ''; document.getElementById(prevTD).style.borderColor = ''; document.getElementById(prevTD).style.padding = '1px'; } else { } document.getElementById(whichTD).style.borderWidth = '1px'; document.getElementById(whichTD).style.borderStyle = 'solid'; document.getElementById(whichTD).style.borderColor = '#000000'; document.getElementById(whichTD).style.padding = 0; prevTD = whichTD; } function getValues(HEXValue) { document.getElementById('colBgPreview2').style.background = HEXValue; document.getElementById(hexField).value = HEXValue; document.getElementById(rField).value = parseInt((cutHex(HEXValue)).substring(0,2),16); document.getElementById(gField).value = parseInt((cutHex(HEXValue)).substring(2,4),16); document.getElementById(bField).value = parseInt((cutHex(HEXValue)).substring(4,6),16); } var b; </script> <!-- Diesen Code musst Du in den -body- einbauen --> <center> <table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50%" id="AutoNumber1"> <tr> <td width="100%"><p align="center" class="center"><script language="JavaScript"> createTable(36); </script> <br> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50%" id="AutoNumber2"> <tr> <td width="100%"> <div id="colBgPreview2" style="align: center; width:322; height:21; border: medium none"></div> </td> </tr> </table> </center> <form name="formen"> <p align="center" class="tabueb">HEX: <input type="text" name="hexValue" id="hexValue" value="#" size="20"> R: <input type="text" name="rValue" id="rValue" size="3"> G: <input type="text" name="gValue" id="gValue" size="3"> B: <input type="text" name="bValue" id="gValue" size="3"> </p> </form> </td> </tr> </table> </center> <!-- Script-Ende --> <!-- www-java24.net - DIE Javascript - Ressource -->