웹마스터 팁
행복한고니님의 체크박스를 이미지로 사용하기를 보고... 체크박스옆에 텍스트 부치기
2004.10.29 23:49
처음 고니님의 함수들 보고 정말 놀랬더랬습니다.
이런것도 있구나하구요..^^;;
msdn 들가보니까 있긴있더라구요..-ㅁ-;
그래서 함따라해봤습니다.
고니님이 하신건 체크박스를 이미지로 교체해서 표현하는거구요
저는 라이오 박스나 체크박스를 그냥 쓰되 바로엽에 글자를 넣어서 글자를 클릭해도 선택이 되게한겁니다.
아직 이런식으로 해본 경험이 없던 터라..많이 부족할겁니다.
사용방법은
<input type="radio" name="a" text="여기다 표시할 문자를 넣습니다.">
<input type="checkbox" name="b" text="여기다 표시할 문자를 넣습니다.">
스크립트는 가급적 <head>와 ~ </head> 사이에 넣으시구요
<body onload="LabelChoice()"> 하시거나
<input 태그가 마지막으로 끝나는 다음에
<script> LabelChoice() </script>
를 넣어주세요.
예제 ) http://maxpond.netcci.net/etc/LabelChoice.html
<script Language="JavaScript" type="text/JavaScript">
<!--
/* 라디오 버튼이나 체크박스를 찾아 변환 */
function LabelChoice(){
var choice, span;
inputs = document.getElementsByTagName( "INPUT" ); // 현재 문서의 엘리먼트중 input 태그만 가져오기
for( i=0; i<inputs.length; i++ ){ // 가져온 인풋태그를 모두 확인
if( inputs[i].type != "radio" && inputs[i].type != "checkbox" ) continue; // 뭘 확인? 라디오 버튼인지 체크버튼인지
if( inputs[i].getAttribute("text") == null ) continue; // text라는 어트리뷰트가 있는지
LabelChoice.choiceBox[LabelChoice.choiceBox.length] = choice = inputs[i]; // 이벤트 처리를 위한 객체를 배열로 넣어둠
LabelChoice.spans[LabelChoice.spans.length] = span = document.createElement( "SPAN" ); // 라벨을 위한 span 태그를 하나 만듬
// span 태그의 글자를 text 어트리뷰트로 정의된 문자열로 채움
span.innerHTML = choice.getAttribute("text");
span.style.cursor = "hand"; // span 태그 커서를 손모양으로
if( choice.checked ) // 기본값 확인
span.style.fontWeight = "bold"; // 체크됬으면 볼드체
choice.oldOnClick = choice.getAttribute( "onclick" ); // 이미 지정된 onclick 이벤트 저장
// 새 onclick 이벤트 등록
span.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 1);" );
choice.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 0);" );
// 체크박스 또는 라디오 버튼 옆에 span 태그를 넣음
choice.insertAdjacentElement( "afterEnd", span );
}
}
/* span 이나 라디오 버튼 클릭시 */
LabelChoice.onclick = function( idx, flag ){
if( flag ){ // span 태그의 onclick 이벤트 발생시
if( LabelChoice.choiceBox[idx].type == "checkbox" ) // 변환된 객체가 체크박스라면
LabelChoice.choiceBox[idx].checked = !LabelChoice.choiceBox[idx].checked; // 반전체크
else
LabelChoice.choiceBox[idx].checked = true; // 라디오 버튼이면 항상 체크
LabelChoice.choiceBox[idx].fireEvent( "onclick" ); // 라디오 또는 체크박스를 대상으로 onclick 이벤트 발생
return;
}
choice = LabelChoice.choiceBox[idx];
choiceSpan = LabelChoice.spans[idx];
choice.oldOnClick(); // 기본으로 등록된 onclick 이벤트 먼저 실행
if( choice.type == "radio" ){ // 라디오 버튼이면
for( i=0; i<LabelChoice.choiceBox.length; i++ ){
if( choice.name != LabelChoice.choiceBox[i].name ) continue; // 이벤트를 발생시킨 객체와 다른 그룹의 라디오 버튼이면 쌩~
LabelChoice.spans[i].style.fontWeight=""; // 아니면 span 태그의 글자체를 default 값으로
}
}
choice.checked = choice.checked;
if( choice.checked )
choiceSpan.style.fontWeight = "bold"; //볼드체로
else
choiceSpan.style.fontWeight = ""; // default 로
}
LabelChoice.choiceBox = [];
LabelChoice.spans = [];
//-->
</script>
<style>
body, span, input { font-size:12px }
</style>
<body onload="LabelChoice()">
<input type="radio" name="A" text="A 그룹 선택하기1"><br>
<input type="radio" name="A" text="A 그룹 선택하기2" checked><br>
<input type="radio" name="A" text="A 그룹 선택하기3"><br>
<p>
<input type="radio" name="B" text="B 그룹 선택하기1"><br>
<input type="radio" name="B" text="B 그룹 선택하기2"><br>
<input type="radio" name="B" text="B 그룹 선택하기3"><br>
<p>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스1"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스2"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스3"><br>
이런것도 있구나하구요..^^;;
msdn 들가보니까 있긴있더라구요..-ㅁ-;
그래서 함따라해봤습니다.
고니님이 하신건 체크박스를 이미지로 교체해서 표현하는거구요
저는 라이오 박스나 체크박스를 그냥 쓰되 바로엽에 글자를 넣어서 글자를 클릭해도 선택이 되게한겁니다.
아직 이런식으로 해본 경험이 없던 터라..많이 부족할겁니다.
사용방법은
<input type="radio" name="a" text="여기다 표시할 문자를 넣습니다.">
<input type="checkbox" name="b" text="여기다 표시할 문자를 넣습니다.">
스크립트는 가급적 <head>와 ~ </head> 사이에 넣으시구요
<body onload="LabelChoice()"> 하시거나
<input 태그가 마지막으로 끝나는 다음에
<script> LabelChoice() </script>
를 넣어주세요.
예제 ) http://maxpond.netcci.net/etc/LabelChoice.html
<script Language="JavaScript" type="text/JavaScript">
<!--
/* 라디오 버튼이나 체크박스를 찾아 변환 */
function LabelChoice(){
var choice, span;
inputs = document.getElementsByTagName( "INPUT" ); // 현재 문서의 엘리먼트중 input 태그만 가져오기
for( i=0; i<inputs.length; i++ ){ // 가져온 인풋태그를 모두 확인
if( inputs[i].type != "radio" && inputs[i].type != "checkbox" ) continue; // 뭘 확인? 라디오 버튼인지 체크버튼인지
if( inputs[i].getAttribute("text") == null ) continue; // text라는 어트리뷰트가 있는지
LabelChoice.choiceBox[LabelChoice.choiceBox.length] = choice = inputs[i]; // 이벤트 처리를 위한 객체를 배열로 넣어둠
LabelChoice.spans[LabelChoice.spans.length] = span = document.createElement( "SPAN" ); // 라벨을 위한 span 태그를 하나 만듬
// span 태그의 글자를 text 어트리뷰트로 정의된 문자열로 채움
span.innerHTML = choice.getAttribute("text");
span.style.cursor = "hand"; // span 태그 커서를 손모양으로
if( choice.checked ) // 기본값 확인
span.style.fontWeight = "bold"; // 체크됬으면 볼드체
choice.oldOnClick = choice.getAttribute( "onclick" ); // 이미 지정된 onclick 이벤트 저장
// 새 onclick 이벤트 등록
span.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 1);" );
choice.onclick = new Function( "LabelChoice.onclick('"+(LabelChoice.choiceBox.length-1)+"', 0);" );
// 체크박스 또는 라디오 버튼 옆에 span 태그를 넣음
choice.insertAdjacentElement( "afterEnd", span );
}
}
/* span 이나 라디오 버튼 클릭시 */
LabelChoice.onclick = function( idx, flag ){
if( flag ){ // span 태그의 onclick 이벤트 발생시
if( LabelChoice.choiceBox[idx].type == "checkbox" ) // 변환된 객체가 체크박스라면
LabelChoice.choiceBox[idx].checked = !LabelChoice.choiceBox[idx].checked; // 반전체크
else
LabelChoice.choiceBox[idx].checked = true; // 라디오 버튼이면 항상 체크
LabelChoice.choiceBox[idx].fireEvent( "onclick" ); // 라디오 또는 체크박스를 대상으로 onclick 이벤트 발생
return;
}
choice = LabelChoice.choiceBox[idx];
choiceSpan = LabelChoice.spans[idx];
choice.oldOnClick(); // 기본으로 등록된 onclick 이벤트 먼저 실행
if( choice.type == "radio" ){ // 라디오 버튼이면
for( i=0; i<LabelChoice.choiceBox.length; i++ ){
if( choice.name != LabelChoice.choiceBox[i].name ) continue; // 이벤트를 발생시킨 객체와 다른 그룹의 라디오 버튼이면 쌩~
LabelChoice.spans[i].style.fontWeight=""; // 아니면 span 태그의 글자체를 default 값으로
}
}
choice.checked = choice.checked;
if( choice.checked )
choiceSpan.style.fontWeight = "bold"; //볼드체로
else
choiceSpan.style.fontWeight = ""; // default 로
}
LabelChoice.choiceBox = [];
LabelChoice.spans = [];
//-->
</script>
<style>
body, span, input { font-size:12px }
</style>
<body onload="LabelChoice()">
<input type="radio" name="A" text="A 그룹 선택하기1"><br>
<input type="radio" name="A" text="A 그룹 선택하기2" checked><br>
<input type="radio" name="A" text="A 그룹 선택하기3"><br>
<p>
<input type="radio" name="B" text="B 그룹 선택하기1"><br>
<input type="radio" name="B" text="B 그룹 선택하기2"><br>
<input type="radio" name="B" text="B 그룹 선택하기3"><br>
<p>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스1"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스2"><br>
<input type="checkbox" name="checkbox[]" text="이번엔 체크박스3"><br>
댓글 2
-
beMax
2005.04.02 09:13
-
잠수부
2005.01.14 19:24
헛참.. 죄송해서..
<input type="radio" id="test"><label for="test">테스트</label>
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| iFlower 윈도우리스 플래시 ActiveX 컨트롤 | 덴디 | 2004.11.16 |
| ActiveX 플래시 이미지캡쳐 컨트롤 iFlower [1] | 덴디 | 2004.11.15 |
| (수정)배경음악,연월일,시간, 코멘트 셋트.(AM,PM==>오전,오후 순,한국식으로 ...) [4] | 민피디 | 2004.11.10 |
| 홈페이지 나갈때 새창띄우기 [2] | piasol | 2004.11.07 |
| ActiveX 멀티파일업로더 입니다. [9] | by風 | 2004.11.01 |
| 행복한고니님의 체크박스를 이미지로 사용하기를 보고... 체크박스옆에 텍스트 부치기 [2] | beMax | 2004.10.29 |
| JavaScript 구문강조 효과내기 | 파우링 | 2004.10.28 |
| 모든 이미지, 텍스트 링크에 점선 없애기 [5] | 이강민 | 2004.10.25 |
| XP2인지 체크하여 XP2일때는 팝업허용하라는 메시지 뛰워주기 [3] | 아돌 | 2004.10.19 |
| 멀티 파일다운로드 꼼수 (새창버전) [1] | 행복한고니 | 2004.10.14 |
| 배열 스크립트 종합선물세트 | 행복한고니 | 2004.10.12 |
| 체크박스를 이미지로 사용하기 [7] | 행복한고니 | 2004.10.10 |
| Javascript + 플래시 칼라피커 [6] | 행복한고니 | 2004.10.08 |
| 자바스크립트로 구현한 윈도우 스타일.. [2] | 크래닉스 | 2004.10.07 |
| 웹페이지에서 단축키 사용 (Firefox) [2] | 전종화 | 2004.10.07 |
| 멀티 파일다운로드 꽁수로 구현하기 [1] | 행복한고니 | 2004.10.07 |
| 슬라이딩 메뉴 자바스크립트 [3] | 행복한고니 | 2004.09.21 |
| 메뉴 추가 삭제 수정시 쓰면 좋을것 같네요 - 출처: http://www.happyscript.com/ [1] | 예뜨락 | 2004.09.17 |
| 내홈피 즐겨찾기/새로고침/앞/뒤로가기 [4] | 팡이 | 2004.09.13 |
| 요일마다 바뀌는 상태바 인사 말~ [2] | Kasis | 2004.09.13 |
>>ㅑ~
이런게 있었다니..;;-_-;;
코멘트에는 추천없나..-ㅁ-;;;;;;;;;;;;;;;;
잠수부님 감사요..^^;;