简易调色板
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>调色板</title><style>*{margin:0px;padding:0px;}.color_table{width:229;border:border:1px solid #000000; cellspacing:0;cellpadding:0;border-bottom:none;border-collapse:collapse;}.color_table tr{height:30px;}.color_table td{background-color:#000000;}.color_block{border:1px solid black;border-collapse: collapse}.color_block td{border:1px solid black;cursor:pointer;}.showinput{border:1px solid #000000;background-color:#ffff00;}</style><script>function initcolor(){var ColorHex=new Array('00','33','66','99','CC','FF')var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')var colorTable=''for (i=0;i<2;i++){for (j=0;j<SpColorHex.length;j++){colorTable=colorTable+'<tr height=12>'if (i==0){colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex+ColorHex+ColorHex+'">'}else{colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex+'">'}for (k=0;k<3;k++){for (l=0;l<6;l++){colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex+ColorHex+ColorHex+'">'}}}}colorTable='<table class="color_table">'+'<tr><td colspan=19 bgcolor=#eee>'+'<div><input type="text" id="showcolor" size="20" disabled class="showinput"></div>'+'</td></tr></table>'+'<table id="colortab" class="color_block" cellspacing="0" cellpadding="0">'+colorTable+'</table>';document.getElementById("colorpanel").innerHTML=colorTable;var x = document.getElementById("colortab").getElementsByTagName("TD");var col = document.getElementById("showcolor");for(var i=0;i<x.length;i++){x.onmouseover=function(){col.value = col.style.backgroundColor = this._bc = this.style.backgroundColor;this.style.backgroundColor = "white";}x.onmouseout=function(){this.style.backgroundColor = this._bc;}x.onclick=function(){alert(this._bc)}//alert the color}}</script></head><body ><div id="colorpanel" style="margin:30px;"></div></body></html>http://dl.iteye.com/upload/attachment/0061/9832/22128577-781c-30db-a0a2-07519e2010bc.png
页:
[1]