웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
체크박스를 이미지로 사용하기
2004.10.10 21:00
예제 및 다운로드 링크 : 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번에 예제와 함께 상세한 설명이 있습니다. 또한, 매뉴얼과 예제가 포함된 파일도 다운받을 수 있습니다.
위에 공개된 소스가 전체 소스이고, 링크에 걸려있는 것은 예제와 다운로드 받을 수 있는 파일이므로 "홈페이지 광고가 너무 노골적인데...?" 라고 생각하시는 분은 굳이 안오셔도 됩니다. ^_^;;
------------------------------------
체크박스를 이미지로 손쉽게 사용할 수 있도록 해주는 스크립트입니다. 대표적으로는 제로보드 스킨 등에 많이 쓰이는 것 같던데, 아무래도 체계적이지 않은 스크립트이다 보니 사용하기 어려운 단점이 있었던 걸로 기억합니다.
우선 소스부터...
-------------------------------------
/**
* 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번에 예제와 함께 상세한 설명이 있습니다. 또한, 매뉴얼과 예제가 포함된 파일도 다운받을 수 있습니다.
위에 공개된 소스가 전체 소스이고, 링크에 걸려있는 것은 예제와 다운로드 받을 수 있는 파일이므로 "홈페이지 광고가 너무 노골적인데...?" 라고 생각하시는 분은 굳이 안오셔도 됩니다. ^_^;;
------------------------------------
댓글 7
-
에지
2004.10.10 23:05
클릭하면 그림이 안나오는;; (오른쪽 클릭해서 "그림 표시(H)"를 눌러야 그제서야 보이는;;) -
밥아저씨
2004.10.11 14:02
제로보드 검색체크도 이런거아닌가염? -
행복한고니
2004.10.11 18:54
밥아저씨 // 아마 보시면 조금 다른걸 알 수 있을겁니다. ^^;;
제가 제로보드 쪽은 거의 안살펴봐서 잘은 모르겠지만 소스를 대충 보게 되면 히든 타입의 input 으로 checkbox 의 값을 받고 있습니다. 만일 on, off 가 아닌 다른 값을 사용한다거나 할 때는 소스를 수정해야 되는 일까지 발생하죠. 제가 만든 것은 기존에 잘~ 쓰고 있던 체크박스를 쓰시던 그대로 이미지로 바꾸어 주도록 했습니다. 즉, 기존에 잘 쓰고 있던 체크박스라면 위의 스크립트에 맞게 몇줄 추가해주는 것만으로 똑같이 사용가능하다는 거죠.
또한 onchange 이벤트가 있을 때 그것도 그대로 쓸 수 있게 했습니다.
만일 아래쪽의 제로보드 검색폼에서 on, off가 아닌 다른 값을 사용할 때는 어떻게 해야 할 것인지, 이미지를 클릭했을때도 체크박스처럼 onchange 이벤트를 발생하려면 어떻게 해야할건지 생각해보신다면 이 스크립트의 장점을 쉽게 알 수 있습니다. :) -
플로렐라
2004.10.11 19:17
익스5.0에서는 안되는군요;; -
행복한고니
2004.10.11 19:45
플로렐라 // 익스5.0 은 DOM 지원이 제대로 안됩니다. -_-a
제가 만드는 것들이 대부분 DOM 표준을 이용하는거라 익스 5.5 이상에서만 제대로 돌아갈겁니다. :) -
플로렐라
2004.10.12 20:24
이런(...)익스5.0 ...
답변감사합니다. -
에지
2004.10.13 20:31
오늘은 제대로 작동하네... (◁맨처음 코멘트 적은놈 퍽-)
제목 | 글쓴이 | 날짜 |
---|---|---|
[PHP 동영상강의] 49. 만년달력 제작해보기 [1] | 서기 | 2007.08.08 |
[PHP 동영상강의] 50. 자바스크립트로 풀다운 메뉴제작 [2] | 서기 | 2007.08.08 |
[PHP 동영상강의] 51. db와 연동된 다중 셀렉트 제작하기 [7] | 서기 | 2007.08.08 |
[zbXE 동영상강좌] 1. zbXE 설치하기 [2] | 서기 | 2007.08.16 |
[zbXE 동영상강좌] 2. 포토샵에서 레이아웃 만들기 [12] | 서기 | 2007.08.16 |
[zbXE 동영상강좌] 3. 레이아웃 완성하기 [13] | 서기 | 2007.08.16 |
[PDF 제작하기 동영상강좌] 1. 기본환경 설정 [1] | 서기 | 2007.08.18 |
[PDF 제작하기 동영상강좌] 2. Hello PDF | 서기 | 2007.08.18 |
[PDF 제작하기 동영상강좌] 3. 기존의 PDF파일 불러오기 [2] | 서기 | 2007.08.18 |
간단한 칠판 모양 게시판
[9]
![]() | SoukoZ | 2007.08.19 |
포인트부여시 ...회원로그인 [2] | 구본순 | 2007.08.28 |
관리자모드 - 관리자그룹만 모든 회원리스트보기 [2] | 이지혜609 | 2007.10.23 |
php에서 exif소스이용하기 [5] | 최만순279 | 2007.11.18 |
웹 계정에서 지워지지 않는 폴더 및 파일 삭제하는 방법 [3] | Rising.kr | 2008.01.24 |
OGIT STUDY 1 | OGIT | 2008.02.01 |
OGIT STUDY 2 [1] | OGIT | 2008.02.01 |
OGIT STUDY 3 [1] | OGIT | 2008.02.01 |
웹페이지 미리보기 snapshot 활용하기 [2] | 유창화 | 2008.02.15 |
FLV 사이트 다운로더 소스
![]() | fallstoofast | 2008.03.07 |
해시로부터 주민등록번호 복호화 [2] | fallstoofast | 2008.03.12 |