색상 선택기 색상 선택기, IE, Firefox, Opera, Safar

출처: 색상 선택기 colorpicker
http://jscolor.com/
http://dematte.at/colorPicker/
http://www.free-color-picker.com/color-picker-samples.php
http://www.nogray.com/color_picker.php
http://www.mattkruse.com/javascript/colorpicker/

ColorPicker2.js 코드

코드 복사 코드는 다음과 같습니다.

// ======================================== =========================
// 작성자: Matt Kruse
// WWW: http://www.mattkruse.com/
//
// 주의사항: 이 코드는 추가 작업 없이 상업적 또는
// 비공개 등 모든 목적으로 사용할 수 있습니다. 저자의 허가. 원하는 경우
// 최종 코드에서 이 알림을 제거할 수 있습니다. 그러나
// 적어도 내 웹사이트 주소가 유지된다면 작성자는 이를 높이 평가할 것입니다.
//
//
// 사용을 제외한 어떤 방식으로도 이 코드를 재배포할 수 *없습니다*. 즉, 제품, 웹
// 사이트 또는 코드가 실제로 사용되는 기타 모든 형식에 코드를 포함할 수 있습니다.
// 일반 자바스크립트를 사이트에 다운로드용으로 올리거나
// 자바스크립트 라이브러리에 포함시켜 다운로드할 수 없습니다.
// 이 코드를 다른 사람과 공유하려면
// 대신 URL을 알려주시기 바랍니다.
// 귀하의 사이트에서 내 .js 파일을 직접 링크하지 마세요.
// 파일을 서버에 복사하여 사용하세요. 감사합니다.
// ============================================ ======================

/* 소스 파일: AnchorPosition.js */
function getAnchorPosition(anchorname){var useWindow= false;var 좌표=새 객체();var x=0,y=0;var use_gebi=false, use_css=false, use_layers=false;if(document.getElementById){use_gebi=true;}else if(document.all ){use_css=true;}else if(document.layers){use_layers=true;}if(use_gebi && document.all){x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);y=AnchorPosition_getPageOffsetTop(document.all[anchorname ]);}else if(use_gebi){var o=document.getElementById(anchorname);x=AnchorPosition_getPageOffsetLeft(o);y=AnchorPosition_getPageOffsetTop(o);}else if(use_css){x=AnchorPosition_getPageOffsetLeft(document.all[anchorname ]);y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);}else if(use_layers){varfound=0;for(var i=0;i함수 getAnchorWindowPosition(anchorname){var Coordinates=getAnchorPosition(anchorname);var x=0;var y=0;if(document.getElementById){if(isNaN(window.screenX)){x=coordinates.x-document .body.scrollLeft window.screenLeft;y=coordinates.y-document.body.scrollTop window.screenTop;}else{x=coordinates.x window.screenX (window.outerWidth-window.innerWidth)-window.pageXOffset;y= Coordinates.y window.screenY (window.outerHeight-24-window.innerHeight)-window.pageYOffset;}}else if(document.all){x=coordinates.x-document.body.scrollLeft window.screenLeft;y=coordinates .y-document.body.scrollTop window.screenTop;}else if(document.layers){x=coordinates.x window.screenX (window.outerWidth-window.innerWidth)-window.pageXOffset;y=coordinates.y 창. screenY (window.outerHeight-24-window.innerHeight)-window.pageYOffset;}coordinates.x=x;coordinates.y=y;좌표 반환;}
function AnchorPosition_getPageOffsetLeft(el){var ol=el.offsetLeft; while((el=el.offsetParent) != null){ol = el.offsetLeft;}return ol;}
function AnchorPosition_getWindowOffsetLeft(el){return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;}
function AnchorPosition_getPageOffsetTop(el){var ot=el.offsetTop;while((el=el.offsetParent) != null){ot = el.offsetTop;}return ot;}
function AnchorPosition_getWindowOffsetTop(el){return AnchorPosition_getPageOffsetTop( el)-document.body.scrollTop;}

/* 소스 파일: PopupWindow.js */
function PopupWindow_getXYPosition(anchorname){var Coordinates;if(this.type == "WINDOW"){ Coordinates = getAnchorWindowPosition(anchorname);}else{coordinates = getAnchorPosition(anchorname);}this.x = Coordinates.x;this.y = Coordinates.y;}
function PopupWindow_setSize(width,height){this.width = 너비;this.height = 높이;}
함수 PopupWindow_populate(contents){this.contents = 내용;this.populated = false;}
함수 PopupWindow_setUrl(url){this.url = url;}
function PopupWindow_setWindowProperties(props){this.windowProperties = props;}
function PopupWindow_refresh(){if(this.divName != null){if(this.use_gebi){document.getElementById(this.divName).innerHTML = this .contents;}else if(this.use_css){document.all[this.divName].innerHTML = this.contents;}else if(this.use_layers){var d = document.layers[this.divName];d. document.open();d.document.writeln(this.contents);d.document.close();}}else{if(this.popupWindow != null && !this.popupWindow.closed){if(this. url!=""){this.popupWindow.location.href=this.url;}else{this.popupWindow.document.open();this.popupWindow.document.writeln(this.contents);this.popupWindow.document .close();}this.popupWindow.focus();}}}
함수 PopupWindow_showPopup(anchorname){this.getXYPosition(anchorname);this.x = this.offsetX;this.y = this.offsetY;if(!this.populated &&(this.contents != "")){ this.populated = true;this.refresh();}if(this.divName != null){if(this.use_gebi){document.getElementById(this.divName).style.left = this.x "px"; document.getElementById(this.divName).style.top = this.y;document.getElementById(this.divName).style.visibility = "visible";}else if(this.use_css){document.all[this.divName ].style.left = this.x;document.all[this.divName].style.top = this.y;document.all[this.divName].style.visibility = "visible";}else if(this. use_layers){document.layers[this.divName].left = this.x;document.layers[this.divName].top = this.y;document.layers[this.divName].visibility = "visible";}} else{if(this.popupWindow == null || this.popupWindow.closed){if(this.x<0){this.x=0;}if(this.y<0){this.y=0; }if(screen && screen.availHeight){if((this.y this.height) > screen.availHeight){this.y = screen.availHeight - this.height;}}if(screen && screen.availWidth){ if((this.x this.width) > screen.availWidth){this.x = screen.availWidth - this.width;}}var 회피AboutBlank = window.opera ||( document.layers && !navigator.mimeTypes['*']) || navigator.vendor == 'KDE' ||( document.childNodes && !document.all && !navigator.taintEnabled);this.popupWindow = window.open(avoidAboutBlank?"":"about:blank","window_" 앵커 이름, this.windowProperties ",width=" this.width ",height=" this.height ",screenX=" this.x ",left=" this.x ",screenY=" this.y ",top=" this. y "");}this.refresh();}}
함수 PopupWindow_hidePopup(){if(this.divName != null){if(this.use_gebi){document.getElementById(this.divName).style. 가시성 = "숨김";}else if(this.use_css){document.all[this.divName].style.visibility = "숨김";}else if(this.use_layers){document.layers[this.divName]. visible = "hidden";}}else{if(this.popupWindow && !this.popupWindow.closed){this.popupWindow.close();this.popupWindow = null;}}}
function PopupWindow_isClicked(e){ if(this.divName != null){if(this.use_layers){var clickX = e.pageX;var clickY = e.pageY;var t = document.layers[this.divName];if((clickX > t .left) &&(clickX < t.left t.clip.width) &&(clickY > t.top) &&(clickY < t.top t.clip.height)){return true;}else{return false;}}else if(document.all){var t = window.event.srcElement;while(t.parentElement != null){if (t.id==this.divName){return true;}t = t.parentElement;}return false;}else if(this.use_gebi && e){var t = e.originalTarget;while(t.parentNode != null){if(t.id==this.divName){return true;}t = t.parentNode;}return false;}return false;}return false;}
function PopupWindow_hideIfNotClicked(e){if(this .autoHideEnabled && !this.isClicked(e)){this.hidePopup();}}
function PopupWindow_autoHide(){this.autoHideEnabled = true;}
function PopupWindow_hidePopupWindows(e){for(var i=0 ;i함수 PopupWindow_attachListener(){if(문서 .layers){document.captureEvents(Event.MOUSEUP);}window.popupWindowOldEventListener = document.onmouseup;if(window.popupWindowOldEventListener != null){document.onmouseup = new Function("window.popupWindowOldEventListener();PopupWindow_hidePopupWindows(); ");}else{document.onmouseup = PopupWindow_hidePopupWindows;}}
함수 PopupWindow(){if(!window.popupWindowIndex){window.popupWindowIndex = 0;}if(!window.popupWindowObjects){window.popupWindowObjects = new Array();}if(!window.listenerAttached){window.listenerAttached = true;PopupWindow_attachListener();}this.index = popupWindowIndex ;popupWindowObjects[this.index] = this;this.divName = null;this.popupWindow = null ;this.width=0;this.height=0;this.populated = false;this.visible = false;this.autoHideEnabled = false;this.contents = "";this.url="";this.windowProperties=" toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizing,alwaysRaised,dependent,titlebar=no";if(arguments.length>0){this.type="DIV";this. divName = 인수[0];}else{this.type="WINDOW";}this.use_gebi = false;this.use_css = false;this.use_layers = false;if(document.getElementById){this.use_gebi = true; }else if(document.all){this.use_css = true;}else if(document.layers){this.use_layers = true;}else{this.type = "WINDOW";}this.offsetX = 0;this. offsetY = 0;this.getXYPosition = PopupWindow_getXYPosition;this.populate = PopupWindow_populate;this.setUrl = PopupWindow_setUrl;this.setWindowProperties = PopupWindow_setWindowProperties;this.refresh = PopupWindow_refresh;this.showPopup = PopupWindow_showPopup;this.hidePopup = PopupWindow_hidePopup;this.setSize = PopupWindow_setSize;this.isClicked = PopupWindow_isClicked;this.autoHide = PopupWindow_autoHide;this.hideIfNotClicked = PopupWindow_hideIfNotClicked;}

/* SOURCE FILE: ColorPicker2.js */

ColorPicker_targetInput = null;
function ColorPicker_writeDiv(){document.writeln("

");}
함수 ColorPicker_show(anchorname){this.showPopup(anchorname);}
함수 ColorPicker_pickColor(color,obj){obj.hidePopup();pickColor(color);}
함수 pickColor (color){if(ColorPicker_targetInput==null){alert("대상 입력이 null입니다. 이는 'select' 함수를 사용하지 않았거나 선택한 색상을 처리하기 위한 자체 'pickColor' 함수를 정의하지 않았음을 의미합니다! ");return;}ColorPicker_targetInput.value = color;}
function ColorPicker_select(inputobj,linkname){if(inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!=" textarea"){alert("colorpicker.select: 전달된 입력 개체는 유효한 양식 입력 개체가 아닙니다.");window.ColorPicker_targetInput=null;return;}window.ColorPicker_targetInput = inputobj;this.show(linkname);}
function ColorPicker_highlightColor(c){var thedoc =(arguments.length>1)?arguments[1]:window.document;var d = thedoc.getElementById("colorPickerSelectedColor");d.style.BackgroundColor = c;d = thedoc. getElementById("colorPickerSelectedColorValue");d.innerHTML = c;}
function ColorPicker(){var windowMode = false;if(arguments.length==0){var divname = "colorPickerDiv";}else if(arguments[ 0] == "창"){var divname = '';windowMode = true;}else{var divname = 인수[0];}if(divname != ""){var cp = new PopupWindow(divname);} else{var cp = new PopupWindow();cp.setSize(225,250);}cp.currentValue = "#FFFFFF";cp.writeDiv = ColorPicker_writeDiv;cp.highlightColor = ColorPicker_highlightColor;cp.show = ColorPicker_show;cp.select = ColorPicker_select ;var 색상 = 새 배열("#000000","#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066 ","#330099","#3300CC",
"#3300FF","#660000","#660033","#660066","#660099","#6600CC","#6600FF", "#990000","#990033","#990066","#990099",
"#9900CC","#9900FF","#CC0000","#CC0033","#CC0066","# CC0099","#CC00CC","#CC00FF","#FF0000","#FF0033","#FF0066",
"#FF0099","#FF00CC","#FF00FF","#003300" ,"#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333",
"#333366","#333399"," #3333CC","#3333FF","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300",
"#993333 ","#993366","#993399","#9933CC","#9933FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF ",
"#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF","#006600","#006633","#006666", "#006699","#0066CC",
"#0066FF","#336600","#336633","#336666","#336699","#3366CC","#3366FF","# 666600","#666633","#666666","#666699",
"#6666CC","#6666FF","#996600","#996633","#996666","#996699" ,"#9966CC","#9966FF","#CC6600","#CC6633","#CC6666",
"#CC6699","#CC66CC","#CC66FF","#FF6600"," #FF6633","#FF6666","#FF6699","#FF66CC","#FF66FF","#009900","#009933",
"#009966","#009999","#0099CC ","#0099FF","#339900","#339933","#339966","#339999","#3399CC","#3399FF","#669900",
"#669933", "#669966","#669999","#6699CC","#6699FF","#999900","#999933","#999966","#999999","#9999CC","#9999FF",
"#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF","#FF9900","#FF9933","#FF9966","# FF9999","#FF99CC",
"#FF99FF","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#33CC00" ,"#33CC33","#33CC66","#33CC99",
"#33CCCC","#33CCFF","#66CC00","#66CC33","#66CC66","#66CC99"," #66CCCC","#66CCFF","#99CC00","#99CC33","#99CC66",
"#99CC99","#99CCCC","#99CCFF","#CCCC00","#CCCC33 ","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF","#FFCC00","#FFCC33",
"#FFCC66","#FFCC99","#FFCCCC", "#FFCCFF","#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF","#33FF00",
"#33FF33","# 33FF66","#33FF99","#33FFCC","#33FFFF","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF",
"#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF","#CCFF00","#CCFF33","#CCFF66","#CCFF99" ,"#CCFFCC",
"#CCFFFF","#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF");var 총계 = 색상. length;var width = 18;var cp_contents = "";var windowRef =(windowMode)?"window.opener.":"";if(windowMode){cp_contents = " 색상 선택 ";cp_contents = "";}cp_contents = "";var use_highlight =(document.getElementById || document.all)?true:false;for(var i=0;i ';if( ((i 1)>=total) ||(((i 1) % 너비) == 0)){cp_contents = "

复代码代码如下: