체크박스를 이미지로...

집크기 늘이고 줄이기에 이어 체크박스를 이미지로 구현해 봤습니다. 역시나 허접소스입니다. 헤헤..
파이어폭스랑 익스에서 다 잘됩니다.

function get_imgDir(imgID) { // 이미지의 src 값으로 이미지의 경로를 구하는 함수입니다.
var imgObj = document.getElementById(imgID);
var imgSrc = imgObj.getAttribute('src').split('/'); //객체의 src를 "/" 단위로 쪼개서 배열로 만듭니다.
var imgDir = '';

var i;
var j = parseInt(imgSrc.length) - 1;

for(i=0; i<j; i++) {
imgDir += imgSrc[i] + '/'; // 파일명에 해당하는 부분을 제외한 나머지를 합칩니다. 예를 들어 <img src='http://domain.com/dir/images/sample.gif ....> 인 경우 http://domain.com/dir/images/ 까지 구해옵니다. 그러므로 체크, 언체크 이미지는 같은 디렉토리에 있어야합니다.
}

return imgDir;
}

function imgCheckBox(inputName) { // 이미지 클릭시 input 객체의 값을 바꾸는 함수입니다.
var imgID = inputName + "_img";
var inputObj = document.getElementsByName(inputName)[0];
var imgObj = document.getElementById(imgID);
var imgDir = get_imgDir(imgID);

if(inputObj.getAttribute('value') == '') {
imgObj.setAttribute('src', imgDir + 'checkbox_true.gif');
inputObj.setAttribute('value',1);
inputObj.checked = true;
} else {
imgObj.setAttribute('src', imgDir + 'checkbox_false.gif');
inputObj.setAttribute('value','');
inputObj.checked = false;
}
}

function get_imgCheckBox(inputName) { // 이미지 체크박스의 초기 이미지를 결정하는 함수입니다.
var imgID = inputName + "_img";
var inputObj = document.getElementsByName(inputName)[0];
var imgObj = document.getElementById(imgID);
var imgDir = get_imgDir(imgID);

imgObj.style.cursor ='pointer'; // 이미지에 커서를 올리면 손가락 모양으로 바뀌는 속성을 부여합니다. hand는 익스 전용이므로 pointer를 씁시다^^

if(inputObj.getAttribute('value') == '1') {
imgObj.setAttribute('src', imgDir + 'checkbox_true.gif');
inputObj.checked = true;
} else {
imgObj.setAttribute('src', imgDir + 'checkbox_false.gif');
inputObj.checked = false;
}
}

사용하는 방법은 다음과 같습니다.
<input type=hidden name=test value='<?=$test?>'>체크박스 테스트
<!-- 기존의 체크박스 객체의 타입을 히든으로 바꾸어줍니다. -->
<img src='http://kuremix.com/test/checkbox_false.gif' id=test_img onClick="imgCheckBox('test')">
<!-- 이미지 객체의 id 값은 해당 input 객체의 name 값에 _img 를 붙여줍니다. -->
<!-- imgCheckBox('test')의 test는 input 객체의 name 값입니다. -->

그리고 해당 페이지 제일 하단에 다음의 스크립트를 넣어줍니다.
<script language=javascript>
get_imgCheckBox('test'); // 해당 input 객체의 value값을 체크해서 값이 1이면 체크표시된 이미지를. 빈 값이면 언체크된 이미지를 뿌려줍니다.
</script>

위 자바스크립트 함수에서 inputObj.checked = false; 와 inputObj.checked = true; 는 링크된 사용예제에서 실제 체크박스와 이미지체크박스의 동작상태를 확인하기 위해서 넣어둔 것입니다. 사용하실 때에는 지우시거나 주석처리하시면 됩니다.<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>