<html>
<haed>
<title>
ColorPicker
</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script>
$(document).ready(function(){
$(".abc").click(function() {
alert("class");
});
$("[name=color_picker]").click(function() {
var hexColorValue = $(this).attr("bgcolor");
var hexColorArray = Array();
// Находим регуляркой пары 16-теричных чисел (цветовой код)
if ( ( hexColorArray = hexColorValue.match( /[0-9a-fA-F]{2}/g ) ) !== null) {
// Переводим полученные числа в 10-тичную систему счисления
for (i = 0; i < hexColorArray.length; i++) {
rgbColorArray[i] = parseInt( hexColorArray[i], 16 );
}
// Объединяем элементы массива в строку с разделителем ','
var rgbColorValue = rgbColorArray.concat();
// Можно и так
// var rgbColorValue = rgbColorArray.join(',');
}
// Все готово
alert( 'rgb(' + rgbColorValue + ')' );
});
});
</script>
</head>
<body>
<p class="abc">Color Picker</p>
<table cellpadding="0" cellspacing="1" border="1">
<tr>
<td bgcolor="#ffffff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#e5e5e5" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#cccccc" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#b2b2b2" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#999999" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#7f7f7f" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#666666" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#4c4c4c" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#333333" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#191919" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#000000" width="15" height="17" name="color_picker" ></td>
<td bgcolor="" width="15" height="17" ><img src="ColorPickerClose.gif" /></td>
<tr>
<tr>
<td bgcolor="#7f0000" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#7f3f00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#7f7f00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#3f7f00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#007f00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#007f3f" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#007f7f" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#003f7f" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#00007f" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#3f007f" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#7f007f" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#7f003f" width="15" height="17" name="color_picker" ></td>
<tr>
<tr>
<td bgcolor="#bf0000" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#bf5f00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#bfbf00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#5fbf00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#00bf00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#00bf5f" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#00bfbf" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#005fbf" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#0000bf" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#5f00bf" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#bf00bf" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#bf005f" width="15" height="17" name="color_picker" ></td>
<tr>
<tr>
<td bgcolor="#ff0000" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ff7f00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ffff00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#7fff00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#00ff00" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#00ff7f" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#00ffff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#007fff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#0000ff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#7f00ff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ff00ff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ff007f" width="15" height="17" name="color_picker" ></td>
<tr>
<tr>
<td bgcolor="#ff5656" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ffaa56" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ffff56" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#aaff56" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#56ff56" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#56ffaa" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#56ffff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#56aaff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#5656ff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#aa56ff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ff56ff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ff56aa" width="15" height="17" name="color_picker" ></td>
<tr>
<tr>
<td bgcolor="#ffaaaa" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ffd4aa" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ffffaa" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#d4ffaa" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#aaffaa" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#aaffd4" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#aaffff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#aad4ff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#aaaaff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#d4aaff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ffaaff" width="15" height="17" name="color_picker" ></td>
<td bgcolor="#ffaad4" width="15" height="17" name="color_picker" ></td>
<tr>
</table>
</body>
</html>
 |
| ColorPicker |