<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>(jhe)ColorJack: DHTML Color Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="
http://www.woeldike.net/test/plugin.css" rel="stylesheet" type="text/css">
<style type="text/css">
.style2 {
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<!--Farve Palette Start -->
<div id="plugin" onmousedown="HSVslide('drag','plugin',event)" class="style2"
style="top:220px; left: 430px; z-index: 20; display='none'">
<div id="plugCUR"></div><div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">
FFFFFF</div><div id="plugCLOSE" onmousedown="toggle('plugin',0)">X</div>
<br>
<div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value">
<div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br></div>
</div>
<form id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue">
<div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br></div>
<div id="Hmodel"></div>
</form>
</div>
<!--Farve Palette Slut -->
<br><br>
<div align="left" class="style2"> OSV...</div>
<table width="70%" border="1">
<!-- IDs changed to support multiple targets -->
<tr>
<td>Uge 10</td>
<td id="plugID1" width="50%" style="border-width:2px">Denne tekst kan ændres</td>
<td><input type="text" id="InputColorHEXplugID1backgroundColor" value=""></td>
<td><a href="java script:toggle('plugin','plugID1','backgroundColor')">Background</a></td>
<td><input type="text" id="InputColorHEXplugID1color" value=""></td>
<td><a href="java script:toggle('plugin','plugID1','color')">Text</a></td>
<td><input type="text" id="InputColorHEXplugID1borderColor" value=""></td>
<td><a href="java script:toggle('plugin','plugID1','borderColor')">Border</a></td>
</tr>
<tr>
<td>Uge 11</td>
<td id="plugID2" width="50%" style="border-width:2px">Denne tekst kan ændres</td>
<td><input type="text" id="InputColorHEXplugID2backgroundColor" value=""></td>
<td><a href="java script:toggle('plugin','plugID2','backgroundColor')">Background</a></td>
<td><input type="text" id="InputColorHEXplugID2color" value=""></td>
<td><a href="java script:toggle('plugin','plugID2','color')">Text</a></td>
<td><input type="text" id="InputColorHEXplugID2borderColor" value=""></td>
<td><a href="java script:toggle('plugin','plugID2','borderColor')">Border</a></td>
</tr>
<tr>
<td>Uge 12</td>
<td id="plugID3" width="50%" style="border-width:2px">Denne tekst kan ændres</td>
<td><input type="text" id="InputColorHEXplugID3backgroundColor" value=""></td>
<td><a href="java script:toggle('plugin','plugID3','backgroundColor')">Background</a></td>
<td><input type="text" id="InputColorHEXplugID3color" value=""></td>
<td><a href="java script:toggle('plugin','plugID3','color')">Text</a></td>
<td><input type="text" id="InputColorHEXplugID3borderColor" value=""></td>
<td><a href="java script:toggle('plugin','plugID3','borderColor')">Border</a></td>
</tr>
</table>
<div align="left" class="style2"> OSV...</div>
</div>
<script type="text/javascript">
/* Added to support multiple fields */
/* - and styles */
//var actRow = 1;
actElm = $("plugID1");
actStyle = "color";
/* DHTML Color Picker v1.0.3, Programming by Ulyses, ColorJack.com */
/* Updated August 24th, 2007 */
function $(v) { return(document.getElementById(v)); }
function $S(v) {return(document.getElementById(v).style); }
function absPos(o) { var r={x:o.offsetLeft,y:o.offsetTop}; if(o.offsetParent) { var v=absPos(o.offsetParent); r.x+=v.x; r.y+=v.y; } return(r); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
/*Function toggle changed to support multiple targets and styles */
function toggle(v,elmID,stAtt) {
$S(v).display=
$S(v).display=='none'
||(elmID!=""
&&(actElm.id!=elmID
||actStyle!=stAtt)
)?'block':'none';
$S('InputColorHEX'+actElm.id+actStyle).backgroundColor="";
actElm = $(elmID);
actStyle = stAtt;
$S('InputColorHEX'+actElm.id+actStyle).backgroundColor="#BBB";
}
function within(v,a,z) { return((v>=a && v<=z)?true:false); }
function XY(e,v) { var z=agent('msie')?[event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop]:[e.pageX,e.pageY]; return(z[zero(v)]); }
function XYwin(v) { var z=agent('msie')?[document.body.clientHeight,document.body.clientWidth]:[window.innerHeight,window.innerWidth]; return(!isNaN(v)?z[v]:z); }
function zero(v) { v=parseInt(v); return(!isNaN(v)?v:0); }
/* PLUGIN */
var maxValue={'h':360,'s':100,'v':100}, HSV={0:360,1:100,2:100};
var hSV=165, wSV=162, hH=163, slideHSV={0:360,1:100,2:100}, zINDEX=15, stop=1;
function HSVslide(d,o,e) {
function tXY(e) { tY=XY(e,1)-ab.y; tX=XY(e)-ab.x; }
function mkHSV(a,b,c) { return(Math.min(a,Math.max(0,Math.ceil((parseInt(c)/b)*a)))); }
function ckHSV(a,b) { if(within(a,0,b)) return(a); else if(a>b) return(b); else if(a<0) return('-'+oo); }
function drag(e) { if(!stop) { if(d!='drag') tXY(e);
if(d=='SVslide') { ds.left=ckHSV(tX-oo,wSV)+'px'; ds.top=ckHSV(tY-oo,wSV)+'px';
slideHSV[1]=mkHSV(100,wSV,ds.left); slideHSV[2]=100-mkHSV(100,wSV,ds.top); HSVupdate();
}
else if(d=='Hslide') { var ck=ckHSV(tY-oo,hH), j, r='hsv', z={};
ds.top=(ck-5)+'px'; slideHSV[0]=mkHSV(360,hH,ck);
for(var i=0; i<=r.length-1; i++) { j=r.substr(i,1); z[i]=(j=='h')?maxValue[j]-mkHSV(maxValue[j],hH,ck):HSV[i]; }
HSVupdate(z); $S('SV').backgroundColor='#'+hsv2hex([HSV[0],100,100]);
}
else if(d=='drag') { ds.left=XY(e)+oX-eX+'px'; ds.top=XY(e,1)+oY-eY+'px'; }
}}
if(stop) { stop=''; var ds=$S(d!='drag'?d:o);
if(d=='drag') { var oX=parseInt(ds.left), oY=parseInt(ds.top), eX=XY(e), eY=XY(e,1); $S(o).zIndex=zINDEX++; }
else { var ab=absPos($(o)), tX, tY, oo=(d=='Hslide')?2:4; ab.x+=10; ab.y+=22; if(d=='SVslide') slideHSV[0]=HSV[0]; }
/* Changed to support real DOM-handling; */
if(document.addEventListener){
document.addEventListener("mousemove",drag,true);
document.addEventListener("mouseup",noDragEL,true);
}else if(document.attachEvent){
document.attachEvent("onmousemove",drag);
document.attachEvent("onmouseup",noDragAE);
}else{
document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };
}
drag(e);
}
/* Functions added to support real DOM-handling */
function noDragEL(){//for EventListener-model
stop=1;
document.removeEventListener("mousemove",drag,true);
document.removeEventListener("mouseup",noDragEL,true);
}
function noDragAE(){//for attachEvent-model
stop=1;
document.detachEvent("onmousemove",drag);
document.detachEvent("onmouseup",noDragAE);
}
}
function HSVupdate(v) { v=hsv2hex(HSV=v?v:slideHSV);
//Changed to support multiple targets and styles; Changed to support real DOM-handling;
$('InputColorHEX'+actElm.id+actStyle).setAttribute("value",v);
$('plugHEX').firstChild.nodeValue=v; //Changed to support real DOM-handling;
$S('plugCUR').backgroundColor = '#'+v;
actElm.style[actStyle] = '#'+v; //Changed to support multiple targets and styles;
return(v);
}
/*Function changed to support real DOM-handling*/
function loadSV() { var y=document.createElement("div");y.appendChild(document.createElement("br"));
for(var i=hSV; i>=0; i--){
z=y.cloneNode(true);
z.style.backgroundColor = '#'+hsv2hex([Math.round((360/hSV)*i),100,100]);
$('Hmodel').appendChild(z);
}
y = null;
}
/* CONVERSIONS */
function toHex(v) { v=Math.round(Math.min(Math.max(0,v),255)); return("0123456789ABCDEF".charAt((v-v%16)/16)+"0123456789ABCDEF".charAt(v%16)); }
function rgb2hex(r) { return(toHex(r[0])+toHex(r[1])+toHex(r[2])); }
function hsv2hex(h) { return(rgb2hex(hsv2rgb(h))); }
function hsv2rgb(r) { // easyrgb.com/math.php?MATH=M21#text21
var R,B,G,S=r[1]/100,V=r[2]/100,H=r[0]/360;
if(S>0) { if(H>=1) H=0;
H=6*H; F=H-Math.floor(H);
A=Math.round(255*V*(1.0-S));
B=Math.round(255*V*(1.0-(S*F)));
C=Math.round(255*V*(1.0-(S*(1.0-F))));
V=Math.round(255*V);
switch(Math.floor(H)) {
case 0: R=V; G=C; B=A; break;
case 1: R=B; G=V; B=A; break;
case 2: R=A; G=V; B=C; break;
case 3: R=A; G=B; B=V; break;
case 4: R=C; G=A; B=V; break;
case 5: R=V; G=A; B=B; break;
}
return([R?R:0,G?G:0,B?B:0]);
}
else return([(V=Math.round(V*255)),V,V]);
}
/* LOAD */
loadSV();
$S('plugin').display='block';
$S('SVslide').top=(80/100*170-7)+'px';
HSVupdate([0,0,20]);
</script>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
