checkbox를 이미지로 대체
페이지 정보
작성자 서방님 댓글 0건 조회 136회 작성일 07-08-11 20:55본문
<HTML>
<HEAD>
<TITLE>BLUE-B</TITLE>
<SCRIPT language=JavaScript>
<!--
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
function initialize() {
psv = new checkBox('myForm1','psvImg','yes','no');
tree = new checkBox('myForm1','treeImg','yes','no');
dome = new radio('myForm1','domeImg',3,'Land');
}
function reset() {
psv = new checkBox('myForm1','psvImg','yes','no');
tree = new checkBox('myForm1','treeImg','yes','no');
dome = new radio('myForm1','domeImg',3,'Land');
dome.change(0,'Land');
changeImage('myForm1', 'psvImg', 'checkbox0');
changeImage('myForm1', 'treeImg', 'checkbox0');
}
function loadImage(imgObj,imgSrc) {
eval(imgObj+' = new Image()');
eval(imgObj+'.src = "'+imgSrc+'"');
}
loadImage('button0','http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox.gif');
loadImage('button1','http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox_checked.gif');
loadImage('radiobutton0','http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox.gif');
loadImage('radiobutton1','http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox_checked.gif');
loadImage('checkbox0','http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox.gif');
loadImage('checkbox1','http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox_checked.gif');
loadImage('reset0','http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox.gif');
loadImage('reset1','http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox_checked.gif');
function submitForm() {
var str = "Option #1 = " + dome.value + "n";
str += "Option #2 = " + psv.value + "n";
str += "Option #3 = " + tree.value + "n";
alert(str);
}
function changeImage(layer,imgName,imgObj) {
if (ns4 && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
else document.images[imgName].src = eval(imgObj+".src");
}
function radio(layer,imgNames,length,defaultValue) {
this.layer = layer;
this.imgNames = imgNames;
this.length = length;
this.change = radioChange;
this.value = (defaultValue)? defaultValue : "undefined";
}
function radioChange(index,value) {
this.value = value;
for (var i=0; i<this.length; i++) changeImage(this.layer,this.imgNames+i,'radiobutton0');
changeImage(this.layer,this.imgNames+index,'radiobutton1');
}
function checkBox(layer,imgName,trueValue,falseValue,defaultToTrue) {
this.layer = layer;
this.imgName = imgName;
this.trueValue = trueValue;
this.falseValue = falseValue;
this.state = (defaultToTrue) ? 1 : 0;
this.value = (this.state) ? this.trueValue : this.falseValue;
this.change = checkBoxChange;
}
function checkBoxChange() {
this.state = (this.state) ? 0 : 1;
this.value = (this.state) ? this.trueValue : this.falseValue;
changeImage(this.layer,this.imgName,'checkbox'+this.state);
}
function fetch(url) { opener.location = url; }
function Finished() { window.close(); }
//-->
</SCRIPT>
<STYLE type=text.css>
<!--
#myForm1 {position: relative;}
-->
</STYLE>
</head>
<body onload="initialize();">
<a href="javascript:initialize()">invoke the initailize routine</a>
<DIV id=myForm1>
<TABLE cellSpacing=0 cellPadding=3 border=0>
<TR>
<TD colSpan=2>Option #1 (한개만 선택가능))</TD></TR>
<TR>
<TD><A href="javascript:dome.change(0,'Value A')"><IMG src="http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox.gif" border=0 name=domeImg0></A></TD>
<TD>Value A</TD>
</TR>
<TR>
<TD><A href="javascript:dome.change(1,'Value B')"><IMG src="http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox.gif" border=0 name=domeImg1></A></TD>
<TD>Value B</TD>
</TR>
<TR>
<TD><A href="javascript:dome.change(2,'Value C')"><IMG src="http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox.gif" border=0 name=domeImg2></A></TD>
<TD>Value C</TD>
</TR>
<TR>
<TD colSpan=2>Option #2 (여러개 선택가능)</TD>
</TR>
<TR>
<TD><A href="javascript:psv.change()"><IMG src="http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox.gif" border=0 name=psvImg></A></TD>
<TD>Value A</TD>
</TR>
<TR>
<TD><A href="javascript:tree.change()"><IMG src="http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox.gif" border=0 name=treeImg></A></TD>
<TD>Value B</TD>
</TR>
<TR>
<TD align=right colSpan=2>
<A onmouseup="changeImage('myForm1','submitImg','button0')" onmousedown="changeImage('myForm1','submitImg','button1')" onmouseout="changeImage('myForm1','submitImg','button0')" href="javascript:submitForm()"><IMG height=30 alt=Submit src="http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox_checked.gif" width=85 vspace=10 border=0 name=submitImg align=absmiddle></A>확인
<A onmouseup="changeImage('myForm1','resetImg','reset0')" onmousedown="changeImage('myForm1','resetImg','reset1')" onmouseout="changeImage('myForm1','resetImg','reset0')" href="javascript:reset()"><IMG height=30 alt=Reset src="http://www.blueb.co.kr/SRC/javascript/image1/forms/checkbox_checked.gif" width=85 vspace=10 border=0 name=resetImg align=absmiddle></A>취소
</TD>
</TR>
</TABLE>
</DIV>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
