Scripts
Color picker
Orgineel script komt van http://www.jswitch.com . Maar je kon het scriptje alleen maar gebruiken met 1 tekstveld. Kennis van mij moest er 9 hebben en wou het niet 10 keer kopieren. Dus ik heb het aan gepast. Moet bekenen niet de "html" code waar ik van hou :) Hoe werkt het: Het getal 1 in id="color1" en id="colora1" mag niet vaker voorkomen in de id tag. Dus geen color1 2 keer toepassen. onclick="ShowLayer(1) is het zelfde getal
color-picker
Downloaden [url]http://phphulp.phpclub.nl/656/color.zip[/url]
[code] cpick.htm
Choose A color: <input type="text" id="color1" size="12"><input id="colora1" type="button" value="" style="cursor:pointer;width:22px;height:22px;border:1px inset gray;background-color:#FF0000" onclick="ShowLayer(1);"><BR>
Choose A color: <input type="text" id="color2" size="12"><input id="colora2" type="button" value="" style="cursor:pointer;width:22px;height:22px;border:1px inset gray;background-color:#FF0000" onclick="ShowLayer(2);"><BR>
Choose A color: <input type="text" id="color3" size="12"><input id="colora3" type="button" value="" style="cursor:pointer;width:22px;height:22px;border:1px inset gray;background-color:#FF0000" onclick="ShowLayer(3);"><BR>
Choose A color: <input type="text" id="color4" size="12"><input id="colora4" type="button" value="" style="cursor:pointer;width:22px;height:22px;border:1px inset gray;background-color:#FF0000" onclick="ShowLayer(4);"><BR>
<!--COLOR PICKER WIDGET BEGIN -->
<div style="position:absolute;border:1px solid black;background-color:white;display:none;width:340px;height:420px;color:#000000;" id="main" imgLoc="">
</div>
<script language="JavaScript" src="cpick.js"></script>
<!--COLOR PICKER WIDGET END -->
</div>
[/code]
cpick.js
[Code]
/*
Author: Eric Simmons
Contact: [email protected]
Website: http://www.jswitch.com
Version: 2.0 12/2004
Browser Target: Mozilla 7+/FireFox Netscape 7+, IE 5.0+
Purpose : Its time for a badly needed update.
DISCLAIMER
THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT
ANY EXPRESS OR IMPLIED WARRANTIES, JSWITCH.COM
IS NOT RESPONSIBLE FOR ANY ADVERSE AFFECTS TO
YOUR COMPUTER OR SYSTEM RUNNING THESE SCRIPTS.
v 1.0
Initial implementation of the color tool.
Basic RGB hex color picker.
v2.0
new features:
Displayable <DIV> layer acts as a popup dailog.
Only requires 2 graphics files.
Can retian up to 8 personal colors.
v 2.1 6/05
When choosing a color on the color map it gets selected.
Fixed probelms with IE scrolling.
Added addition custom color space.
UI change for cleaner look and more defined user of controls.
fixes:
Cleaner JS for more clarity.
Code optimized for speed.
*/
//Changable variables
var STR_CAPTION = "JSwitch Color Picker"
/*This is the function that you can add your code to, or overide and access the color
in the SEL_COLOR variable. The SEL_COLOR variable is a hex value of the currently
selected color. It is set everytime a user clicks on the ok button.
After setting the SEL_COLOR var the BtnOk() function calls the "BtnOkClicked()";
function BtnOkClicked()
{}
*/
var mouseX =0; //current horizontal position of the mouse
var mouseY =0; //current veritcal position of the mouse
var boxX =0;
var boxY =0;
var cpaneX = 0;
var cpaneY = 0;
var cmapX = 0;
var cmapY = 0;
var cPaneT = 0;
var cPaneL = 0;
var cmapRegSel = 1;
var cmapReg = 1;
var cmapSel = 10;
var InCPane = false;
var InCMap = false;
var U_COL_NUM = 10;
var usrColor = new Array("NA","NA","NA","NA","NA","NA","NA","NA","NA","NA");
var SEL_COLOR;
var IMG_PATH
var PALLET_LAYER = null;
//CSS STYLES
var STYLE_BTN = 'text-align:center;cursor:pointer;font-family:\"TAHOMA\";font-size:11pt;font-weight:bold;width:60px;height:20px;background-color:ThreeDHighlight;position:absolute;';
var STYLE_BTN_OVER ='position:absolute;border:1px solid black;text-align:center;cursor:pointer;font-family:"TAHOMA";font-size:11pt;font-weight:bold;background-color:ThreeDHighlight';
var STYLE_BTN_DOWN ='border-bottom:1px solid ButtonHighlight;border-right:1px solid ButtonHighlight;border-top:1px solid ButtonShadow;border-left:1px solid ButtonShadow;';
var STYLE_BORD = 'position:absolute;border:1px solid black;';
var STYLE_CMAP = 'position:absolute;border:1px solid black;background-image:url(\''+document.getElementById("main").getAttribute("imgLoc")+'cmap.jpg\'); background-repeat:no-repeat;';
//var STYLE_MASK_MZ = 'position:absolute;border:1px solid black;cursor:crosshair;width:257px;height:258px;left:5px;top:30px;';
var STYLE_MASK_MS = 'position:absolute;border:1px solid black;cursor:crosshair;width:257px;height:258px;left:5px;top:30px;';
var STYLE_USER = 'position:absolute;border:1px solid black;width:20px;height:20px;cursor:pointer;';
var STYLE_TAG = 'position:absolute;border:1px solid black;color:white;text-align:center;width:40px;height:20px';
var STYLE_TEXT = 'width:30px;height:20px;position:absolute;';
var STYLE_COMP = 'position:absolute;border:1px solid black;width:60px;height:20px;';
document.onmousemove = getXY; //get new cords when mouse is moved
if (navigator.appName == "Microsoft Internet Explorer")
{
cPaneT = 34;
cPaneL = 9;
} else
{
cPaneT = 32;
cPaneL = 6;
document.captureEvents(Event.MOUSEMOVE);
}
GetCookieArray();
function ShowLayer(id,id2)
{
var mainDiv = document.getElementById("main");
boxX = mouseX;
boxY = mouseY;
mainDiv.style.top = boxY
mainDiv.style.left = boxX;
mainDiv.style.display = 'inline';
date = new Date();
date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 30));
document.cookie = 'Field='+id+'; expires=' + date.toGMTString();
// document.cookie = 'Field2='+id2+'; expires=' + date.toGMTString();
IMG_PATH = mainDiv.getAttribute("imgLoc");
mainDiv.innerHTML= MakeDivLayer();
//mainDiv.innerHTML=CreatePalette();
if(navigator.appName == "Microsoft Internet Explorer")
document.getElementById("cPaneMask").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ IMG_PATH +"cmask.png', sizingMethod='scale')" ;
else
document.getElementById("cPaneMask").style.backgroundImage = 'url('+IMG_PATH+'cmask.png)';
UpdateUserColor();
ChangePaneColor("FF0000");
}
function SetUserColor()
{
curCol = document.getElementById("cComp1").style.backgroundColor;
for (i=U_COL_NUM-1;i>0;i--)
{
usrColor[i] = usrColor[i-1];
}
if(curCol.substr(0,1) == "r")
curCol = rgb2hex(curCol);
usrColor[0] = curCol;
UpdateUserColor();
UpdateUserCookie();
}
function UpdateUserColor()
{
divName = "cUser";
for (i=0;i<U_COL_NUM;i++)
{
tempName =divName + i;
if (usrColor[i] != "NA")
document.getElementById(tempName).style.backgroundColor = usrColor[i];
}
}
function UpdateUserCookie()
{
date = new Date();
date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 30));
document.cookie = "cUser" + "=" + escape(usrColor.toString()) + "; expires=" + date.toGMTString();
}
function GetCookieArray()
{
tmpColor = GetUserCookie("cUser").split(",");
for(i=0;i<tmpColor.length;i++)
{
if(tmpColor[i] != "")
{
usrColor[i] = tmpColor[i];
}
}
}
function SetRetainColor(userObj)
{
newColor = userObj.style.backgroundColor;
document.getElementById("cComp1").style.backgroundColor = newColor;
if(newColor.substr(0,1) == "r")
document.getElementById("thex").value = rgb2hex(newColor);
else
document.getElementById("thex").value = newColor;
}
function GetUserCookie(crumbName)
{
colCookie = document.cookie.split("; ");
for (a=0; a < colCookie.length; a++)
{
colCrumb = colCookie[a].split("=");
if(colCrumb[0] == crumbName)
return unescape(colCrumb[1]);
}
return "";
}
function getXY(e)
{
if (!e)
{
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
} else
{
mouseX = e.pageX;
mouseY = e.pageY;
}
if (InCPane)
{
cpaneX = mouseX - boxX-cPaneL;
cpaneY = mouseY - boxY-cPaneT;
if (cpaneX < 0) cpaneX = 0;
if (cpaneX > 255) cpaneX = 255;
if (cpaneY < 0) cpaneY = 0;
if (cpaneY > 255) cpaneY = 255;
FindColor();
}
if (InCMap)
{
cmapX = mouseX - boxX-272;
cmapY = mouseY - boxY-32;
if (cmapX < 1) cmapX = 1;
if (cmapX > 60) cmapX = 60;
if (cmapY < 0) cmapY = 0;
if (cmapY > 255) cmapY = 255;
cmapReg = Math.ceil(cmapX/10);
}
}
function GetMapColor()
{
var rtnColor
cmapSel = cmapY;
document.getElementById("cmapCur").style.top =cmapY-1;
document.getElementById("cmapCur").style.left = ((cmapReg-1)*10);
cmapRegSel = cmapReg;
switch (cmapReg)
{
case 1:
rtnColor = '#' + dec2hex(255) + dec2hex(0) + dec2hex(cmapSel);
break;
case 2:
rtnColor = '#' + dec2hex(cmapSel) + dec2hex(0) + dec2hex(255);
break;
case 3:
rtnColor = '#' + dec2hex(0) + dec2hex(cmapSel) + dec2hex(255);
break;
case 4:
rtnColor = '#' + dec2hex(0) + dec2hex(255) + dec2hex(cmapSel);
break;
case 5:
rtnColor = '#' + dec2hex(cmapSel) + dec2hex(255) + dec2hex(0);
break;
case 6:
rtnColor = '#' + dec2hex(255) + dec2hex(cmapSel) + dec2hex(0);
break;
}
return rtnColor;
}
function GetNewColor()
{
newColor = FindColor();
document.getElementById("cComp1").style.backgroundColor = newColor;
document.getElementById("thex").value = newColor;
}
function FindColor()
{
var X;
var Y;
var Z;
var R;
var G;
var B;
X = cpaneX;
Y = Math.round (cpaneY * (X/255));
Z = (cpaneY * ((255-cmapSel)/255)) + cmapSel;
Z = Math.round( Z * (cpaneX/255));
switch (cmapRegSel)
{
case 1:
R = X;G = Y;B = Z;
break;
case 2:
R = Z;G = Y;B = X;
break;
case 3:
R = Y;G = Z;B = X;
break;
case 4:
R = Y;G = X;B = Z;
break;
case 5:
R = Z;G = X;B = Y;
break;
case 6:
R = X;G = Z;B = Y;
break;
}
bgRed = '#' + dec2hex(R) + dec2hex(0) + dec2hex(0);
bgGrn = '#' + dec2hex(0) + dec2hex(G) + dec2hex(0);
bgBlu = '#' + dec2hex(0) + dec2hex(0) + dec2hex(B);
rtnColor = '#' + dec2hex(R) + dec2hex(G) + dec2hex(B);
document.getElementById("red").value = String(R);
document.getElementById("grn").value = String(G);
document.getElementById("blu").value = String(B);
document.getElementById("red").style.backgroundColor = bgRed;
document.getElementById("grn").style.backgroundColor = bgGrn;
document.getElementById("blu").style.backgroundColor = bgBlu;
document.getElementById("cComp2").style.backgroundColor = rtnColor;
return rtnColor;
}
function FindColorPoint(pointX, pointY)
{
var X;
var Y;
var Z;
var R;
var G;
var B;
X = pointX;
Y = Math.round (pointY * (X/255));
Z = (cpaneY * ((255-cmapSel)/255)) + cmapSel;
Z = Math.round( Z * (pointX/255));
switch (cmapRegSel)
{
case 1:
R = X;G = Y;B = Z;
break;
case 2:
R = Z;G = Y;B = X;
break;
case 3:
R = Y;G = Z;B = X;
break;
case 4:
R = Y;G = X;B = Z;
break;
case 5:
R = Z;G = X;B = Y;
break;
case 6:
R = X;G = Z;B = Y;
break;
}
bgRed = '#' + dec2hex(R) + dec2hex(0) + dec2hex(0);
bgGrn = '#' + dec2hex(0) + dec2hex(G) + dec2hex(0);
bgBlu = '#' + dec2hex(0) + dec2hex(0) + dec2hex(B);
rtnColor = '#' + dec2hex(R) + dec2hex(G) + dec2hex(B);
return rtnColor;
}
function ChangePaneColor(nColor)
{
document.getElementById("cPane").style.backgroundColor = nColor;
document.getElementById("cComp1").style.backgroundColor = nColor;
document.getElementById("thex").value = nColor;
}
function rgb2hex(rgb)
{
rExp = new RegExp("RGB", "i");
rgb = rgb.replace(rExp,"");
rgb = rgb.substring(1,rgb.length-1);
rgbAry = rgb.split(", ");
rtnStr = "#" + dec2hex(parseInt(rgbAry[0])) + dec2hex(parseInt(rgbAry[1])) + dec2hex(parseInt(rgbAry[2]))
return rtnStr;
}
function dec2hex(n)
{
s=(n.toString(16));
s=s.toUpperCase();
if (s.length == 1)
s = '0' + s
return(s);
}
function BtnCancel()
{
document.getElementById("main").style.display = "none";
cmapRegSel = 1;
cmapSel = 0;
}
function BtnOk()
{
SEL_COLOR = document.getElementById("thex").value
BtnCancel();
BtnOkClicked();
}
function CreatePalette()
{
var newPalLayer = "";
ptop = 0;
pleft = 5;
cNum = 0;
for(rows=0;rows < 10; rows++)
{
for (cols=0;cols<10;cols++)
{
newPalLayer += '<div style="background-color:'+ FindColorPoint(10, cNum) +';left:'+pleft +'px;top:'+ ptop +'px;'+STYLE_USER+'" onclick="SetRetainColor(this);"></div>';
pleft += 25;
cNum += 2;
}
pleft = 5;
ptop += 25;
cNum += 2;
}
//alert(newPalLayer);
return newPalLayer;
}
function MakeDivLayer()
{
var newDivLayer;
newDivLayer = '<div id="title" style="width:337px;height:22px;border-bottom:1px solid black;font-weight:bold;color:white;text-align:center;background-color:#0C58C2;">' + STR_CAPTION + '</div>';
newDivLayer += '<div id="cPane" style="border-left:1px solid black;position:absolute;width:257px;height:258px;left:5px;top:30px;background-color:#FF0000;"></div>';
newDivLayer += '<div style="'+STYLE_MASK_MS+'" id="cPaneMask" onmouseout="InCPane=false;" onMouseMove="InCPane=true;" onclick="GetNewColor();"></div>';
newDivLayer += '<div style="cursor:crosshair;width:60px;height:258px;left:270px;top:30px;'+STYLE_CMAP+'" id="cMap" onclick="ChangePaneColor(GetMapColor());" onmouseout="InCMap=false;" onMouseMove="InCMap=true;">';
newDivLayer += '<div id="cmapCur" style="position:absolute;left:0px;top:0px;width:10px;height:1px;border-bottom:1px solid black"><!-- --></div>';
newDivLayer += '</div>';
newDivLayer += '<span style="position:absolute;left:5px;top:290px;">Custom colors:</span>';
newDivLayer += '<input type="button" style="height:20px;width:45px;left:7px;top:310px;'+STYLE_BTN_OVER+'" id="btnUser" onclick="SetUserColor();" value=">>">';
newDivLayer += '<div style="left:55px;top:310px;'+STYLE_USER+'" id="cUser0" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<div style="left:80px;top:310px;'+STYLE_USER+'" id="cUser1" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<div style="left:5px;top:335px;'+STYLE_USER+'" id="cUser2" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<div style="left:30px;top:335px;'+STYLE_USER+'" id="cUser3" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<div style="left:55px;top:335px;'+STYLE_USER+'" id="cUser4" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<div style="left:80px;top:335px;'+STYLE_USER+'" id="cUser5" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<div style="left:5px;top:360px;'+STYLE_USER+'" id="cUser6" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<div style="left:30px;top:360px;'+STYLE_USER+'" id="cUser7" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<div style="left:55px;top:360px;'+STYLE_USER+'" id="cUser8" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<div style="left:80px;top:360px;'+STYLE_USER+'" id="cUser9" onclick="SetRetainColor(this);"></div>';
newDivLayer += '<span style="position:absolute;left:137px;top:290px;">RGB:</span>';
newDivLayer += '<div style="left:110px;top:310px;'+STYLE_TEXT+'" >red:</div>';
newDivLayer += '<div style="left:110px;top:335px;'+STYLE_TEXT+'" >grn:</div>';
newDivLayer += '<div style="left:110px;top:360px;'+STYLE_TEXT+'" >blu:</div>';
newDivLayer += '<input type="text" style="none;left:135px;top:310px;'+STYLE_TAG+'" id="red">';
newDivLayer += '<input type="text" style="none;left:135px;top:335px;'+STYLE_TAG+'" id="grn">';
newDivLayer += '<input type="text" style="none;left:135px;top:360px;'+STYLE_TAG+'" id="blu">';
newDivLayer += '<span style="position:absolute;left:277px;top:290px;">Color:</span>';
newDivLayer += '<span style="position:absolute;left:190px;top:310px;">Finder:</span>';
newDivLayer += '<span style="position:absolute;left:190px;top:335px;">Selected:</span>';
newDivLayer +='<div style="left:270px;top:310px;'+STYLE_COMP+'" id="cComp2"></div>';
newDivLayer += '<div style="left:270px;top:335px;'+STYLE_COMP+'" id="cComp1"></div>';
newDivLayer += '<div style="'+STYLE_TEXT+';width:90px;left:190px;top:360px;">Triple Hex:</div>';
newDivLayer += '<input style="text-align:center;width:70px;height:20px;left:260px;top:360px;'+STYLE_BORD+'" type="text" ID="thex">';
newDivLayer += '<input type="button" style="width:60px;left:5px;top:390px;'+STYLE_BTN_OVER+'" id="btnOK" onclick="BtnOk();" value="ok">';
newDivLayer += '<input type="button" style="width:60px;left:70px;top:390px;'+STYLE_BTN_OVER+'" id="btnCan" onclick="BtnCancel();" value="close" >';
//newDivLayer += "</div>
return newDivLayer;
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return null
}
function BtnOkClicked()
{
var field=getCookie('Field');
//document.write(document.cookie);
document.getElementById('color'+field).value = SEL_COLOR;
document.getElementById('colora'+field).style.backgroundColor = SEL_COLOR;
}
function UpdateColor(id){
//get value
var color = document.getElementById('color'+id).value;
x = document.getElementById('colora'+id);
x.style.backgroundColor= color;
return;
}
[code]
Reacties
0