웹마스터 팁

링크 1 : http://mygony.com/tt/index.php?pl=78&nc=1
링크 2 : http://mygony.com/tt/down.php?attachname=637911.zip

플래시와 연동한 칼라피커 입니다.

우선 소스....
-----------------------------------
/**
* by 행복한고니 (20041008)
*
* Homepage : http://www.mygony.com
*/

var ColorPicker = function() {};

ColorPicker.appendSWF = false;
ColorPicker.show = function(obj, handler) {
        if (ColorPicker.path == undefined) ColorPicker.path = "ColorPicker.swf";
        if (ColorPicker.align == undefined) ColorPicker.align = "left";
        if (ColorPicker.handler == undefined) {
                if (handler == undefined) ColorPicker.handler = function(str){};
                else ColorPicker.handler = handler;
        }

        if (ColorPicker.appendSWF == false) ColorPicker.DoAppendSWF();

        var X, Y;
        var pos = ColorPicker.getOffsetPos(obj);
        var W = obj.offsetWidth, H = obj.offsetHeight;
        
        with (ColorPicker) {
                align = align.toLowerCase();
                layer.style.display = "block";
                X = pos.x, Y = pos.y;

                if (align == "left") {
                        Y += H;
                } else if (align == "right") {
                        X = pos.x - (layer.offsetWidth - W);
                        Y += H;
                } else if (align == "top") {
                        X += W;
                } else if (align == "middle") {
                        X += W;
                        Y -= Math.round((layer.offsetHeight-H)/2);
                } else if (align == "bottom") {
                        X += W;
                        Y -= layer.offsetHeight - H;
                }

                layer.style.top = Y + 'px';
                layer.style.left = X + 'px';
        }
}

ColorPicker.hide = function() {
        if (ColorPicker.appendSWF == false) ColorPicker.DoAppendSWF();

        ColorPicker.layer.style.display = "none";
}

ColorPicker.getOffsetPos = function(obj) {
        if (obj.offsetParent == null) {
                return {"x":obj.offsetLeft, "y":obj.offsetTop};
        } else {
                var pos = ColorPicker.getOffsetPos(obj.offsetParent);
                return {"x":obj.offsetLeft + pos.x, "y":obj.offsetTop + pos.y};
        }
}

ColorPicker.DoAppendSWF = function() {
        var DIV = document.createElement("DIV");
        var BODY = document.getElementsByTagName("BODY")[0];

        DIV.innerHTML = "<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="150" height="130"><param name="movie" value=""+ColorPicker.path+""><param name="quality" value="high"><embed src=""+ColorPicker.path+"" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="150" height="130"></embed></object>";
        DIV.style.position = "absolute";
        DIV.style.display = "none";
        ColorPicker.layer = BODY.appendChild(DIV);

        ColorPicker.appendSWF = true;
}
-----------------------------------

위 소스를 포함한 후에, 환경설정을 해줄 수 있는데...
-----------------------------------
// settings
ColorPicker.path = 'ColorPicker.swf';
ColorPicker.align = 'right'; // ( left, right, middle, top, bottom)
ColorPicker.handler = userFunc; // default handler
-----------------------------------

위와 같이 설정합니다. 여기서 userFunc 은 사용자가 미리 정의한 함수입니다. 사용자 함수를 정의하실때에는 반드시 한개이상의 전달자가 있어야 합니다. 첫번째 값으로는 '#'를 포함한 16진수 색상코드가 전달됩니다.

첫번째 링크를 클릭하시면 예제 및 파일을 다운로드 받으실 수 있으며 보다 상세한 설명을 볼 수 있고, 두번째 링크를 클릭하시면 바로 관련 파일만 다운로드 받을 수 있습니다.