예제 및 다운로드 링크 : http://mygony.com/tt/index.php?pl=81&nc=1

체크박스를 이미지로 손쉽게 사용할 수 있도록 해주는 스크립트입니다. 대표적으로는 제로보드 스킨 등에 많이 쓰이는 것 같던데, 아무래도 체계적이지 않은 스크립트이다 보니 사용하기 어려운 단점이 있었던 걸로 기억합니다.

우선 소스부터...
-------------------------------------
/**
* Created by 행복한고니
*
* Homepage    : http://mygony.com
* Last update : 2004/09/23
*
*/

function imgCbox(N, tabstop)
{
        var objs, cboxes, Img, Span, A;

        objs = document.getElementsByTagName("INPUT");
        if (N == undefined) return false;
        if (tabstop == undefined) tabstop = true;

        for (var i=0; i < objs.length; i++) {
                if (objs[i].type != "checkbox" || objs[i].name != N) continue;
                
                if (imgCbox.Objs[N] == undefined) {
                        imgCbox.Objs[N] = [];
                        imgCbox.Imgs[N] = [];
                        imgCbox.ImgObjs[N] = [];
                }
                
                var len = imgCbox.Objs[N].length;
                imgCbox.Objs[N][len] = objs[i];
                imgCbox.Imgs[N][len] = {};

                // for image cache
                (Img = new Image()).src = objs[i].getAttribute("onsrc");
                imgCbox.Imgs[N][len]["on"] = Img;

                (Img = new Image()).src = objs[i].getAttribute("offsrc");
                imgCbox.Imgs[N][len]["off"] = Img;

                // image element
                Img = document.createElement("IMG");
                Img.src = objs[i].checked?objs[i].getAttribute("onsrc"):objs[i].getAttribute("offsrc");
                Img.style.borderWidth = "0px";
                Img.onclick = new Function("imgCbox.onclick('"+N+"','"+len+"')");
                imgCbox.ImgObjs[N][len] = Img;

                // anchor element for tab stop
                A = document.createElement("A");
                if (tabstop) {
                        A.href = "javascript:;";
                        A.onkeypress = new Function("evt", "if(evt==undefined)evt=event;if(evt.keyCode==32||evt.keyCode==0){ imgCbox.onclick('"+N+"','"+len+"'); }");
                }
                A.style.borderWidth = "0px";
                A.appendChild(Img);

                // insert object
                Span = objs[i].parentNode;
                Span.style.display = "none";
                Span.parentNode.insertBefore(A, Span);
        }
}
imgCbox.onclick = function(N, idx) {
        var C = imgCbox.Objs[N][idx];
        var I = imgCbox.ImgObjs[N][idx];

        C.checked = !C.checked;
        I.src = imgCbox.Imgs[N][idx][C.checked?"on":"off"].src;
        
        // fire event
        if (C.onclick != undefined || C.onclick != null) C.onclick();
}
imgCbox.Objs = {};
imgCbox.Imgs = {};
imgCbox.ImgObjs = {};
-------------------------------------

사용법은 간단합니다.
1. 보통때와 같이 일반 체크박스를 만듭니다.

2. onsrc 와 offsrc 라는 속성을 체크박스에 입력합니다.
<input type="checkbox" ~~ onsrc="이미지경로" offsrc="이미지경로" /> 와 같은 식이 됩니다.

3. 체크박스를 포함해서 이미지로 대체하려는 부분을 <span> 태그로 감싸준다.

4. 체크박스의 코드가 끝나는 곳에 다음 코드를 삽입합니다.
<script>imgCbox(체크박스의 이름);</script>

5. 끝.... -_-;;


------------------------------------
링크 1번에 예제와 함께 상세한 설명이 있습니다. 또한, 매뉴얼과 예제가 포함된 파일도 다운받을 수 있습니다.
위에 공개된 소스가 전체 소스이고, 링크에 걸려있는 것은 예제와 다운로드 받을 수 있는 파일이므로 "홈페이지 광고가 너무 노골적인데...?" 라고 생각하시는 분은 굳이 안오셔도 됩니다. ^_^;;
------------------------------------