웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
스킨 시스템 구축.(1탄 읽어오기) [11] | 씨파개 | 2003.05.13 |
Wake On Lan 기능 사용하기... [3] | sMokaHallo | 2003.05.17 |
썸네일 자동생성하고 이미지 사이즈 자동 줄이기... [6] | sMokaHallo | 2003.05.21 |
홈페이지의 내용을 DB에 담기 [15] | 세죠위그이 | 2003.05.30 |
체크박스등으로 배열로 변수를 넘길때.. [1] | myself2 | 2003.06.06 |
php 로 기존 문서 포함시키기 [10] | 이성헌 | 2003.06.08 |
PHP 익히기 1 [24] | 구리구리 | 2003.06.09 |
PHP 익히기 2 [9] | 구리구리 | 2003.06.10 |
PHP 익히기 3 [11] | 구리구리 | 2003.06.17 |
이미 인클루드된 파일은 다시 인클루드하지 않기 [14] | 김병희 | 2003.06.20 |
htmlspecialchars 사용하시는 분들 [5] | holies | 2003.07.11 |
Thumbnail 생성하기 - 수정^^; [9] | holies | 2003.07.11 |
'와 "의 속도 차이?! [6] | holies | 2003.07.12 |
초간단 php 랜덤 이미지 및 랜덤 배경이미지 소스 [6] | 거금도 | 2003.07.24 |
다른 사이트에 있는 파일 읽어오기 [50] | 김규백 | 2003.07.25 |
스킨 시스템 사용하기 [2] | 김규백 | 2003.07.25 |
제로보드 + MSN 메신저 (작성글에 리플이나 코멘트가 달리면 MSN으로 알려준다?) [18] | HungryMania | 2003.08.01 |
체널을 응용해서 tmain.php?tdb=test&db=src 식으로 쓰기 [12] | 9000㎒ | 2003.08.01 |
$i++ !== $i += 1 [14] | 플로렐라 | 2003.08.04 |
개판 오분전 정규식(4) | 미친개 | 2003.08.07 |