체크박스를 이미지로...
링크
http://myownstyle.com/examples/image_checkbox.php (392) http://myownstyle.com/examples/image_checkbox.php?test=1 (346)
집크기 늘이고 줄이기에 이어 체크박스를 이미지로 구현해 봤습니다. 역시나 허접소스입니다. 헤헤..
파이어폭스랑 익스에서 다 잘됩니다.
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>
파이어폭스랑 익스에서 다 잘됩니다.
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>
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 2개