[JS] 이미지 체크박스 스크립트
1. 개요
체크박스를 손쉽게 이미지로 변경해서 사용할 수 있도록 하는 javascript 이다. 물론… 웹브라우저의 구분없이 사용할 수 있다.
체크박스를 손쉽게 이미지로 변경해서 사용할 수 있도록 하는 javascript 이다. 물론… 웹브라우저의 구분없이 사용할 수 있다.
2. 사용법
우선, 평상시와 다름없이 체크박스를 만든다.
그 다음에 체크박스에 offsrc와 onsrc라는 이름으로 속성을 정해주고 체크박스에 썼던 라벨까지 span태그로 묶어준다. 태그로 묶어주는 부분이 이미지로 대체되는 부분이므로 만약 라벨을 제외한 박스 부분만을 이미지로 대체하려면 라벨을 제외한 부분에만 span태그를 적용하도록 한다.
우선, 평상시와 다름없이 체크박스를 만든다.
1번 박스
2번 박스
그 다음에 체크박스에 offsrc와 onsrc라는 이름으로 속성을 정해주고 체크박스에 썼던 라벨까지 span태그로 묶어준다. 태그로 묶어주는 부분이 이미지로 대체되는 부분이므로 만약 라벨을 제외한 박스 부분만을 이미지로 대체하려면 라벨을 제외한 부분에만 span태그를 적용하도록 한다.
1번 박스
2번 박스
체크박스의 코드가 끝나는 곳에 다음 코드를 삽입한다.
위에서 체크박스에 입력했던 name 값을 적어주면 끝!
… 뭘 더 바라세요…. -_-;;
위에서 체크박스에 입력했던 name 값을 적어주면 끝!
… 뭘 더 바라세요…. -_-;;
아… 혹시 필요하신 분들이 계실지 몰라서 tabstop기능을 넣어두었는데, 탭을 누르다보면 이미지로 된 체크박스에도 포커스가 간다. 일반 체크박스와 마찬가지로 엔터키를 누르면 체크/해제가 되고, 체크박스의 두번째 전달자가 tabstop기능의 사용여부이므로 사용하지 않으실 분은 다음과 같이 코드를 수정하면 된다. 기본값은 true입니다.
※ 주의: Opera 웹브라우저에서는 tabstop기능이 동작하지 않습니다.
※ 주의: Opera 웹브라우저에서는 tabstop기능이 동작하지 않습니다.
3. 사용예제
아래는 간단한 예제인데… 사실 위의 것을 그대로 옮겨놓은거다.
[#NOBR_START#] 1번 체크박스 2번 체크박스
[#NOBR_END#]
아래는 간단한 예제인데… 사실 위의 것을 그대로 옮겨놓은거다.
[#NOBR_START#] 1번 체크박스 2번 체크박스
[#NOBR_END#]
4. 라이센스
소스내 주석에 있는 제 이름과 홈페이지 주소만 없애지 않는다면 어디에 사용해도 좋습니다.
소스내 주석에 있는 제 이름과 홈페이지 주소만 없애지 않는다면 어디에 사용해도 좋습니다.
[##_1C|202090.zip|| 다운로드 하려면 클릭! _##]
** Changelog
2004-09-23
- 첫번째 릴리즈
2005-02-22
- checked 로 설정했을경우 첫번째 클릭에 반응하지 않던 오류수정 (연히 님)
- undefined 체크 구문 수정 (빌 님)
2004-09-23
- 첫번째 릴리즈
2005-02-22
- checked 로 설정했을경우 첫번째 클릭에 반응하지 않던 오류수정 (연히 님)
- undefined 체크 구문 수정 (빌 님)
질문드립니다.
이미지 체크박스를 직접 클릭해서 제어하는 방법 말구
checked 값을 조정하여 간접적으로 바꿀 수 있는지….
안타깝게도 현재로서는 방법이 없습니다. IE 전용이라면 어떻게 해볼만한데, 기타 브라우저에서 답이 없네요. -_-;;
다중선택이 안되게 막을려면 어떻게 해야 하나요? 궁금.
체크박스를 배열로 두고 전체 선택과 선택 해제를 시도해보왔는데
document.getElementsByName("tb_list[]").length; 는 구해집니다만
document.getElementsByName("tb_list[]")[i].checked=true;
는 동작하지 않네요. 확인부탁드려도 될까요??
laires// URL이나 그 부분 소스를 좀 알려주시면… (원인을 모르겠거든요. -_-a)
저도 게시판에서 저렇게 나타나내요–;
방법이 없을까요(제로보드)
이은// 작업한 HTML소스를 저한테 한번 보내줘보세요.
그 페이지 소스 전체를요. 이미지는 필요없습니다.
gonom9 지멜 쩜 컴 입니다.
답변 좀 부탁드려요.. 제가 설명을 잘 못해서 번거롭게 해드려서 죄송한데요.. 저게 게시판에 소스 적용한 모습이거든요.. □ 이거는 이미지고요.. 게시판 리스트인데 체크박스 이름도 같고 Do Loop문 안에서 반복되서 그런 것 같기도 한데.. 저렇게 한 페이지에서 처음 게시물에는 이미지가 하나, 두번째 게시물에는 두개, 세번째 게시물에는 세개 이렇게 표시되거든요..
이은// 아… 정말 말그대로 박스만 여러개 있다는 말씀이셨군요.
그렇다면 사용은 위와 같이 하구요, 그림을 만들때 "박스만 있는" 그림으로 만드세요. 그렇게 하시면 될 것 같은데요?
번호 | 체크박스 선택 | 제목
——————————————-
5. □□□□□ 이은 바보
——————————————-
4. □□□□ 이은 바보
——————————————-
3. □□□ 이은 바보
——————————————-
2. □□ 이은 바보
——————————————-
1. □ 이은 바보
——————————————-
이렇게 되거든요..
이은// 아직도 무슨 말씀이신지 자세히 이해가 안가지만… 일단 제가 이해하는 한도내에서 말씀드리면…
이 스크립트는 input 을 1:1로 바꾸는 겁니다. 체크박스가 있던 그 자리 그대로 적용하죠. 중요한 것은 name 의 개수인데, 체크박스의 개수가 아니라 체크박스 태그안에 있는 name이 총 몇개인지가 중요합니다. 그 수만큼 스크립트를 실행하면 되거든요. 예를 들어 name="~~~" 의 ~~~부분에 들어가는 이름이 sc1 도 있고 sc2도 있다고 하면 모든 체크박스가 끝난 이후의 위치에서
<script langauge="javascript">
cbox("sc1", false); cbox("sc2", false);
</script>
이렇게 실행을 해주시면 됩니다.
게시판 리스트에서 게시물을 선택할 수 있도록 되어 있는데요..
1번에는 체크박스 이미지가 하나 표시되고 2번에는 두개, 3번에는 3개.. 이렇게 되요..
답변 좀 부탁드려요..
이은// 무슨 말씀이신지 자세하게 말씀해주셨으면 합니다.
안녕하세요..
게시판 리스트에 적용을 시키려 하는데요..
리스트 순서대로 박스 이미지의 수가 표시 되거든요..
어떻게 해야 하는지 답변 좀 부탁드려요..
새우깡// 여러번 써주는 수밖에 없죠 -_-a
죄송한데요.
한 페이지에 이름이 각각 다른 체크박스가 많을 때에는 어떻게
적용해야 하나요?
연히 // 수정했습니다. 생각지도 못했던 부분이네요. -_-a
체크 상태로 하려고 checked 를 줬더니.. 한번 클릭시에는 안되네요..
undefined 비교문을 제대로 구현이 안되어 있습니다.
ie 5.0 에서 에러나네요.. 5.5이상에서 글로벌로…
typeof
webcm // 소스내에
A.style.borderWidth = “0px”;
이 부분이 있는데, 그 아래에
A.onfocus = new Function(” this.blur();”);
이 구절을 추가하시면 될 것 같습니다.
체크박스 스크립트 정말 감사합니다
체크박스에 링크점선을 없애려고 input에 onfocus=”this.blur()”을 줬는데 안먹히네요;;
어디에 줘야하는지 답변좀 부탁드릴께요
공이// 바꿔놓은 줄 알았는데 깜빡했었나봐요. 알려주셔서 감사합니다.
지금은 바뀐 버전으로 올려두었습니다.
아직 다운로드에는 안바꿔놓으셨네요^^;
감사히 잘쓰겠습니다.
제가 찾던건데..최고예요!!!
이젠 정상동작합니당. ^^
비가 상당히 많이 오네요.
하늘이 내일 현장학습 가는데… ㅜ.ㅜ
아침엔 비 오지마라 오지마라
잘 되요.
오마르 // 바뀐 소스에선 그렇게 해놓았습니다. 중간중간 만들던거라, 코딩 규칙이 조금씩 틀어질때가 있거든요. ㅠ_ㅠ 이틀정도 더 놔둬보고 별 이상없는 것 같으면 수정한 소스를 다운받을 수 있도록 해놓겠습니다.
이야~ 넘 좋네여~ ^^
그런데요.. 소스상에서 보면 input 태그를 컬렉션으로 가져와서
그중에 체크박스를 구분하는데 그걸 name 로만 가져오는건
어떨지.. 이미지 체크박스는 같은 name을 가지니깐여..
의견이었습니다.. ^^
xp, ie6.0 sp1
이상없이 잘 작동합니다.
예제에 사용된 스크립트 코드를 바꿔봤습니다.
지금도 안보이는 증상이 있나요? 다운로드나 게시물을 올렸던 곳에는 아직 소스를 바꾸지 않았습니다. 제대로 보인다고 하면 바뀐 소스로 공개하도록 하겠습니다.
처음 이 링크로 들어와서 해보니 위 의견처럼 클릭하니 사라지네요.
근데, 다른 페이지로 이동후 뒤로가기 해서 다시 돌아오면 잘 됩니다.
뭐가 문제일까요?
윈2000Pro, IE6.0 SP1에서도 마우스 클릭하면 이미지 사라지고요 다시 눌러도 나타나지 않습니다.
냐하하~ 이것도 좋네요~ 매일매일 새로운 게 올라오네요.
요즘 한창 개발욕구에 차신 듯..? ^_^
… 왜 이미지가 사라질까요. -_-a
그런 보고가 또 한건 들어와있어서 조금 신경이 쓰이네요… 으~~ 자야되는데…
XP IE6 SP2 정상적으로 작동합니다^^
예제에서 마우스 클릭 후 이미지가 사라집니다.
XP IE6 SP2
소스는 확인하지 않은 상황입니다. 이제 들어와서 피곤한 관계로 리포팅만…