 Javascript + CSS
본문의 화일 내용
<head>
..
<style>
input.a {background-color:blue; margin:2pt;
width:80pt; height:60pt; vertical-align:middle; text-align:center}
input.a1 {background-color:green; margin:2pt;
width:40pt; height:20pt; vertical-align:middle; text-align:center}
input.b {background-color:green; margin:2pt;
width:15pt; height:15pt; vertical-align:middle; text-align:center}
input.c {background-color:cc8; margin:2pt;
width:20pt; height:30pt; vertical-align:middle; text-align:center}
input.d {background-color:8cc; margin:1em;
width:16pt; height:8pt; vertical-align:middle; text-align:center}
radio checked {color:red}
</style>
</head>
<body>
..
<table border=0>
<tr align=center valign=middle>
<td>
<form style="color:green; border:solid 1pt red; width:12em;
text-align:center; background-color:eff; padding:.5em" method="get">
<input type=radio name="a" value="aaa" class=a
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="blue"'> aaa</input>
<input type=radio name="a" value="bbb" class=a checked
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="blue"'> bbb</input>
<input type=radio name="a" value="ccc" class=a
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="blue"'> ccc</input>
</form>
</td>
<td>
<form style="color:green; border:solid 1pt red; width:6em; text-align:center;
background-color:eff; padding:.5em" method="get">
<input type=radio name="a1" value="aaa" class=a1
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="green"'> aaa</input>
<input type=radio name="a1" value="bbb" class=a1 checked
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="green"'> bbb</input>
<input type=radio name="a1" value="ccc" class=a1
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="green"'> ccc</input>
</form>
</td>
<td>
<form style="color:green; border:solid 1pt red; width:6em; text-align:center;
background-color:eff; padding:.5em" method="get">
<input type=radio name="b" value="aaa" class=b
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="green"'> aaa</input>
<input type=radio name="b" value="bbb" class=b checked
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="green"'> bbb</input>
<input type=radio name="b" value="ccc" class=b
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="green"'> ccc</input>
</form>
</td>
</tr>
<tr align=center valign=middle>
<td>
<form style="color:blue; border:solid 1pt blue; width:18em;
text-align:center; background-color:fee">
<input type=radio name=c class=c checked
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="cc8"'> aaa</input>
<input type=radio name=c class=c
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="cc8"'> bbb</input>
<input type=radio name=c class=c
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="cc8"'> ccc</input>
</form>
</td>
<td colspan=2>
<form style="color:blue; border:solid 1pt blue; width:18em;
text-align:center; background-color:fee">
<input type=radio name=c class=d checked
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="8cc"'> aaa</input>
<input type=radio name=c class=d
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="8cc"'> bbb</input>
<input type=radio name=c class=d
onmouseover='this.style.backgroundColor="red"'
onmouseout='this.style.backgroundColor="8cc"'> ccc</input>
</form>
</td>
</tr>
</table>
..
</body>
</html>
|
제공