기술팁

[JS] 이미지 체크박스 스크립트

1. 개요
체크박스를 손쉽게 이미지로 변경해서 사용할 수 있도록 하는 javascript 이다. 물론... 웹브라우저의 구분없이 사용할 수 있다.
2. 사용법
우선, 평상시와 다름없이 체크박스를 만든다.

1번 박스
2번 박스

그 다음에 체크박스에 offsrc와 onsrc라는 이름으로 속성을 정해주고 체크박스에 썼던 라벨까지 span태그로 묶어준다. 태그로 묶어주는 부분이 이미지로 대체되는 부분이므로 만약 라벨을 제외한 박스 부분만을 이미지로 대체하려면 라벨을 제외한 부분에만 span태그를 적용하도록 한다.

1번 박스
2번 박스
체크박스의 코드가 끝나는 곳에 다음 코드를 삽입한다.



위에서 체크박스에 입력했던 name 값을 적어주면 끝!
... 뭘 더 바라세요.... -_-;;
아... 혹시 필요하신 분들이 계실지 몰라서 tabstop기능을 넣어두었는데, 탭을 누르다보면 이미지로 된 체크박스에도 포커스가 간다. 일반 체크박스와 마찬가지로 엔터키를 누르면 체크/해제가 되고, 체크박스의 두번째 전달자가 tabstop기능의 사용여부이므로 사용하지 않으실 분은 다음과 같이 코드를 수정하면 된다. 기본값은 true입니다.

※ 주의: Opera 웹브라우저에서는 tabstop기능이 동작하지 않습니다.
3. 사용예제
아래는 간단한 예제인데... 사실 위의 것을 그대로 옮겨놓은거다.
[#NOBR_START#]
1번 체크박스
2번 체크박스


[#NOBR_END#]
4. 라이센스
소스내 주석에 있는 제 이름과 홈페이지 주소만 없애지 않는다면 어디에 사용해도 좋습니다.
[##_1C|202090.zip|| 다운로드 하려면 클릭! _##]
** Changelog
2004-09-23
- 첫번째 릴리즈
2005-02-22
- checked 로 설정했을경우 첫번째 클릭에 반응하지 않던 오류수정 (연히 님)
- undefined 체크 구문 수정 (빌 님)

소스코드.zip

  2. 이젠 정상동작합니당. ^^

    비가 상당히 많이 오네요.
    하늘이 내일 현장학습 가는데... ㅜ.ㅜ
    아침엔 비 오지마라 오지마라

    Reply

  6. 체크박스 스크립트 정말 감사합니다

    체크박스에 링크점선을 없애려고 input에 onfocus="this.blur()"을 줬는데 안먹히네요;;

    어디에 줘야하는지 답변좀 부탁드릴께요

    Reply

  7. webcm // 소스내에
    A.style.borderWidth = "0px";
    이 부분이 있는데, 그 아래에
    A.onfocus = new Function(" this.blur();");
    이 구절을 추가하시면 될 것 같습니다.

    Reply

  8. undefined 비교문을 제대로 구현이 안되어 있습니다.
    ie 5.0 에서 에러나네요.. 5.5이상에서 글로벌로...
    typeof

    Reply

댓글을 남겨주세요

This site uses Akismet to reduce spam. Learn how your comment data is processed.