Interaktivnφ RGB mφchaΦka barev








<body onLoad="init()" bgcolor="#FFFFFF">

<STYLE type="text/css">
<!--
BODY {font-family:arial; font-size:12px;}
A{color: white;text-decoration:none;font-weight:bold;}   

CODE{ font-family:arial; font-size:14px; font-weight:bold;background-color:white;layer-background-color:white;color:#000000;}
#napis{position:absolute; top:250; left:350; }

#posuvniky{position:absolute;top:10; left:90;width:63;height:263;clip:rect(0 63 263 0);}
#posuvnikr{position:absolute;background-color:black;layer-background-color:black;width:2;height:263;clip:rect(0 2 263 0);left:10;top:0;z-index:100;}
#posuvnikg{position:absolute;background-color:black;layer-background-color:black;width:2;height:263;clip:rect(0 2 263 0);left:30;top:0;z-index:100;}
#posuvnikb{position:absolute;background-color:black;layer-background-color:black;width:2;height:263;clip:rect(0 2 263 0);left:50;top:0;z-index:100;}


#jezdecr{position:absolute;background-color:red;layer-background-color:red;width:12;height:8;clip:rect(0 12 8 0); top:10; left:95;border:outset 1px red;z-index:200;}
#jezdecg{position:absolute;background-color:green;layer-background-color:green;width:12;height:8;clip:rect(0 12 8 0); top:10; left:115;border:outset 1px #007d00;z-index:200;}
#jezdecb{position:absolute;background-color:blue;layer-background-color:blue;width:12;height:8;clip:rect(0 12 8 0); top:10; left:135;border:outset 1px #0000fa;z-index:200;}
#previewcolor{position:absolute;background-color:black;layer-background-color:black;width:200;height:200;clip:rect(0 200 200 0); left:180; top:20;}

#rgb{position:absolute; top:30; left:400; font-weight:bold; font-family:arial; font-size:12px;}
#hxx{position:absolute; top:240; left:200; font-weight:bold; font-family:arial; font-size:12px;}
-->
</STYLE>

<SCRIPT LANGUAGE="javascript1.2">
<!--
n = (document.layers)? true:false
ie = (document.all)? true:false
dragArray = new Array()
actualcolor=0;
rr=0;
gg=0;
bb=0;
wh=12;
he=8;
delta=263

function init() {
    jezdecR = new dynLayer('jezdecr',null,1);
    jezdecG = new dynLayer('jezdecg',null,1);
    jezdecB = new dynLayer('jezdecb',null,1);
    Previewcolor = new dynLayer('previewcolor',null,null)
    RGB = new dynLayer('rgb',null,null);
    Posuvniky = new dynLayer('posuvniky');
    Hxx = new dynLayer('hxx');
if (n) {
dragObj = jezdecR
dragObj.xpos = dragObj.css.left
dragObj.ypos = dragObj.css.top
dragObj.w = dragObj.css.clip.width
dragObj.h = dragObj.css.clip.height
}
if (ie) {
dragObj = jezdecR
dragObj.xpos = dragObj.pixelLeft
dragObj.ypos = dragObj.pixelTop
dragObj.w = dragObj.pixelWidth
dragObj.h = dragObj.pixelHeight
}

dragActive = false

document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}


function dynLayer(id,nestref,drag) {
    if (n) {
        if (nestref) {
            this.css = eval("document." + nestref + ".document." + id);
            this.ref = eval("document." + nestref + ".document." + id + ".document");
        }
        else {
            this.css = document.layers[id];
            this.ref = document.layers[id].document;
        }
        this.x = this.css.left;
        this.y = this.css.top;
    }
    else if (ie) {
        this.css = document.all[id].style;
        this.ref = document;
        this.wri = document.all[id];
        this.x = this.css.pixelLeft;
        this.y = this.css.pixelTop;
    }
    this.obj = id + "Object";
    eval(this.obj + "=this");
    this.moveTo = dynLayerMoveTo;
    this.show = dynLayerShow;
    this.hide = dynLayerHide;
if (drag)
    dragArray[dragArray.length] = this;

}
function dynLayerShow() {
    if (n) this.css.visibility = "show";
    else if (ie) this.css.visibility = "visible";
}
function dynLayerHide() {
    if (n) this.css.visibility = "hide";
    else if (ie) this.css.visibility = "hidden";
}

function dynLayerMoveTo(x,y) {
    this.x = x;
    this.css.left = this.x;
    this.y = y;
    this.css.top = this.y;
}
function dynLayerMoveBy(x,y) {
    this.x += x;
    this.css.left = this.x;
    this.y += y;
    this.css.top = this.y;
}

            /*MOUSE DOWN*/

function mouseDown(e) {
    if ((n && e.which == 1) || ie) {
        if (n) {var x=e.pageX; var y=e.pageY}
        if (ie) {var x=event.x; var y=event.y+document.body.scrollTop}
        dragObj=null;
        for(var i=0; i< dragArray.length;i++){
            if (x>=dragArray[i].x && x<=dragArray[i].x+wh && y>=dragArray[i].y && y<=dragArray[i].y+he){
            dragObj=dragArray[i]; actualcolor=i;
            }
        }
            if(dragObj){
    dragClickY = y-dragObj.y
    dragActive = true
    return false
        }
    }
}

            /*MOUSE MOVE*/
function mouseMove(e) {
    if (n) {var x=e.pageX; var y=e.pageY}
    if (ie) {var x=event.x; var y=event.y+document.body.scrollTop}
    if (dragActive) {
    if(dragObj.y>=Posuvniky.y && dragObj.y<=Posuvniky.y+delta){
        dragObj.moveTo(dragObj.x,(y-dragClickY))

    }
    if(dragObj.y>Posuvniky.y+delta-he) dragObj.moveTo(dragObj.x,Posuvniky.y+delta-he)
    if(dragObj.y<Posuvniky.y) dragObj.moveTo(dragObj.x,Posuvniky.y)
    setColorPreview(dragObj.y-Posuvniky.y)
    window.status=dragObj.y-Posuvniky.y;
    return false
}
}
            /*MOUSE UP*/
function mouseUp(e) {
if (n) {var x=e.pageX; var y=e.pageY}
if (ie) {var x=event.x; var y=event.y+document.body.scrollTop}
    if(dragActive){
    }
dragActive = false
}


function Op(){
var Newwin=open( 'index.htm',"",'status=no,toolbar=no,location=no,menu=no,resizable=no,width=600,height=300');
}



            /*FUNCTION FOR COLOR*/

function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

            /*SET RGB*/


function setbgColor(r, g, b) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
if(n)Previewcolor.css.bgColor = "#"+hr+hg+hb;
if(ie)Previewcolor.css.backgroundColor = "#"+hr+hg+hb;
Hxx.ref.hexago.h.value=" #"+hr+hg+hb;
}


function setColorPreview(arg){
if(arg>255) arg=255
if(arg<0) arg=0
    switch (actualcolor){
    case 0 : rr=arg
        break;
    case 1 : gg=arg
        break;
    case 2 : bb=arg
        break;
    }
RGB.ref.rgbcolor.r.value=rr;
RGB.ref.rgbcolor.g.value=gg;
RGB.ref.rgbcolor.b.value=bb;
setbgColor(rr,gg,bb)
}

function manualRGB(act,cl){
color=parseInt(cl)
if(color>255) color=255
if(color<0) color=0

dragArray[act].moveTo(dragArray[act].x,Posuvniky.y+color);
actualcolor=act;
setColorPreview(color)
}

function info(){

alert(RGB.ref.rgbcolor.r.value)}
//-->
</SCRIPT>


<!-- <A HREF="javascript:Op()">open in w.</A> -->
<DIV ID="posuvniky">
    <DIV ID="posuvnikr" ></DIV>
    <DIV ID="posuvnikg"></DIV>
    <DIV ID="posuvnikb"></DIV>
</DIV>


<DIV ID=jezdecr></DIV>
<DIV ID=jezdecg></DIV>
<DIV ID=jezdecb></DIV>


<DIV ID="previewcolor">
</DIV>

<SPAN ID="rgb">
<FORM name=rgbcolor>
<BR>
R: <INPUT TYPE="text" NAME="r" SIZE="3" onChange="manualRGB(0,this.value)" VALUE="0"><BR>
G: <INPUT TYPE="text" NAME="g" SIZE="3" onChange="manualRGB(1,this.value)" VALUE="0"><BR>
B: <INPUT TYPE="text" NAME="b" SIZE="3" onChange="manualRGB(2,this.value)" VALUE="0"><BR>
</FORM>
</SPAN>

<DIV ID="hxx">
<FORM name=hexago>Hexa: <INPUT TYPE="text" NAME="h" SIZE="7" onChange="manualRGB(2,this.value)" VALUE=" #000000"><BR>
</FORM></DIV>

<DIV ID="napis"><CODE>Interaktivnφ RGB mφchaΦka barev</CODE></DIV>