반응형
라디오 버튼 이나 체크박스 경우는 form 테크 에서 지원 하는 형태 를 그대로 사용하면
페이지 의 특성과 맞지 않을 수 있다.
아니 거의 맞지 않을때가 많다.
원하는 이미지 로 할 수 있다.. 물론 조금 번거롭다.
이미지 를 그려야 하고 추가로 코딩을 해야 한다.
라디오 버튼 의 경우의 샘플을 작성 해 봤다 ...
자바스크립트 의 for 루프 부분에서 적절히 코드를 추가 하면 체크 박스 조 마찬가지로 구현 할 수 있을것이다.
나중에 체크 박스 도 그려야 할때 다시 글을 포스팅 하겠다.
아래 는 이미지 라디오 버튼 의 샘플이다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 이미지 라디오 버튼 </TITLE>
<script language="Javascript">
<!--
function check_img(a,b) {
// 갯수 만큼 for 루프 의 숫자를 정의 한다.
for (i=1;i<5;i++ )
{
b = "choice" + i;
// 선택 안했을때의 이미지 경로
document.all[b].src = "images/uncheck.png";
}
// 선택 했을때 의 이미지 경로
document.all[a].src="images/check.png";
document.all.realData.value = a;
}
-->
</script>
</HEAD>
<HTML>
<HEAD>
<TITLE> 이미지 라디오 버튼 </TITLE>
<script language="Javascript">
<!--
function check_img(a,b) {
// 갯수 만큼 for 루프 의 숫자를 정의 한다.
for (i=1;i<5;i++ )
{
b = "choice" + i;
// 선택 안했을때의 이미지 경로
document.all[b].src = "images/uncheck.png";
}
// 선택 했을때 의 이미지 경로
document.all[a].src="images/check.png";
document.all.realData.value = a;
}
-->
</script>
</HEAD>
<body>
<form action="" method="post" name="imgradio">
<input type="hidden" name="realData" value="">
<img src="images/uncheck.png" name="choice1" onClick="check_img(this.name,'')">선택 1
<img src="images/uncheck.png" name="choice2" onClick="check_img(this.name,'')">선택 2
<img src="images/uncheck.png" name="choice3" onClick="check_img(this.name,'')">선택 3
<img src="images/uncheck.png" name="choice4" onClick="check_img(this.name,'')">선택 4
<img src="images/uncheck.png" name="choice5" onClick="check_img(this.name,'')">선택 5
<input type="submit">
</form>
</body>
</html>
<form action="" method="post" name="imgradio">
<input type="hidden" name="realData" value="">
<img src="images/uncheck.png" name="choice1" onClick="check_img(this.name,'')">선택 1
<img src="images/uncheck.png" name="choice2" onClick="check_img(this.name,'')">선택 2
<img src="images/uncheck.png" name="choice3" onClick="check_img(this.name,'')">선택 3
<img src="images/uncheck.png" name="choice4" onClick="check_img(this.name,'')">선택 4
<img src="images/uncheck.png" name="choice5" onClick="check_img(this.name,'')">선택 5
<input type="submit">
</form>
</body>
</html>
위의 샘플을 보면 체크 박스 일때 어떻게 구현 해야 할지 보일것이다.
체크 박스 의 다른 특성은 중복선택 가능 하게 하는것이니까. hidden 속성의 폼이 갯수 만큼 있어야 겠죠..
반응형
'Programming' 카테고리의 다른 글
| 구글의 Analytics 처럼 웹 분석 하는 piwik- 오픈소스(설치형) (0) | 2011.02.09 |
|---|---|
| 홈페이지 에 마우스 커서 모양 바꾸기 (0) | 2011.02.09 |
| 버튼,체크박스,파일,라디오,텍스트,콤보박스,리스트,메모 CSS (0) | 2011.02.08 |
| PHP 무료 엔코더 (0) | 2011.02.01 |
| XMLHttpRequest (0) | 2011.01.27 |
