マウスポインタをラジオボタンの上に合わせると、色を反転（背景色と文字色を変化）させる。
実装例
実装例の動作について
- ポップ、ロック、テクノのラジオボタンの上に、マウスポインタを合わせると、ラジオボタンの色を反転（背景色と文字色を変化）させる。
- ポップ、ロック、テクノのラジオボタンの上から、マウスポインタを離すと、元のラジオボタンの色に戻す。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function changeColor( mouse, id ) {
if ( mouse == 'over' ) {
document . getElementById( id ) . style . backgroundColor = 'cadetblue';
document . getElementById( id + '-label' ) . style . color = 'white';
} else if ( mouse == 'out' ) {
document . getElementById( id ) . style . backgroundColor = 'white';
document . getElementById( id + '-label' ) . style . color = 'black';
}
}
// -->
</script>
<!--
function changeColor( mouse, id ) {
if ( mouse == 'over' ) {
document . getElementById( id ) . style . backgroundColor = 'cadetblue';
document . getElementById( id + '-label' ) . style . color = 'white';
} else if ( mouse == 'out' ) {
document . getElementById( id ) . style . backgroundColor = 'white';
document . getElementById( id + '-label' ) . style . color = 'black';
}
}
// -->
</script>
CSS
<style type="text/css">
<!--
form#form-1 div {
background-color : white;
color : black;
padding: 0px 0px 2px 5px;
display: inline;
}
form#form-1 label {
padding: 0 10px 0 2px;
color : black;
}
-->
</style>
<!--
form#form-1 div {
background-color : white;
color : black;
padding: 0px 0px 2px 5px;
display: inline;
}
form#form-1 label {
padding: 0 10px 0 2px;
color : black;
}
-->
</style>
HTML
<form id="form-1" name="Form1" method="post" action="#">
<div id="radio-0" onMouseOver="changeColor( 'over', 'radio-0' )" onMouseOut="changeColor( 'out', 'radio-0' )">
<input type="radio" name="music" value="ポップ" id="rock" checked><label for="rock" id="radio-0-label"> ポップ</label>
</div>
<div id="radio-1" onMouseOver="changeColor( 'over', 'radio-1' )" onMouseOut="changeColor( 'out', 'radio-1' )">
<input type="radio" name="music" value="ロック" id="pop"><label for="pop" id="radio-1-label"> ロック</label>
</div>
<div id="radio-2" onMouseOver="changeColor( 'over', 'radio-2' )" onMouseOut="changeColor( 'out', 'radio-2' )">
<input type="radio" name="music" value="テクノ" id="techno"><label for="techno" id="radio-2-label"> テクノ</label>
</div>
</form>
<div id="radio-0" onMouseOver="changeColor( 'over', 'radio-0' )" onMouseOut="changeColor( 'out', 'radio-0' )">
<input type="radio" name="music" value="ポップ" id="rock" checked><label for="rock" id="radio-0-label"> ポップ</label>
</div>
<div id="radio-1" onMouseOver="changeColor( 'over', 'radio-1' )" onMouseOut="changeColor( 'out', 'radio-1' )">
<input type="radio" name="music" value="ロック" id="pop"><label for="pop" id="radio-1-label"> ロック</label>
</div>
<div id="radio-2" onMouseOver="changeColor( 'over', 'radio-2' )" onMouseOut="changeColor( 'out', 'radio-2' )">
<input type="radio" name="music" value="テクノ" id="techno"><label for="techno" id="radio-2-label"> テクノ</label>
</div>
</form>
解説
JavaScript
<script type="text/javascript">
<!--
function changeColor( mouse, id ) { // 引数を変数mouseと変数idに代入
if ( mouse == 'over' ) { // マウスポインタをラジオボタンの上に合わせたとき
document . getElementById( id ) . style . backgroundColor = 'cadetblue'; // id属性の値が、変数idの値である要素の背景色を変更
document . getElementById( id + '-label' ) . style . color = 'white'; // id属性の値が、変数idに"-label"を加えた値である要素の文字色を変更
} else if ( mouse == 'out' ) { // マウスポインタをラジオボタンの上から離したとき
document . getElementById( id ) . style . backgroundColor = 'white'; // id属性の値が、変数idの値である要素の背景色を元に戻す
document . getElementById( id + '-label' ) . style . color = 'black'; // id属性の値が、変数idに"-label"を加えた値である要素の文字色を元に戻す
}
}
// -->
</script>
<!--
function changeColor( mouse, id ) { // 引数を変数mouseと変数idに代入
if ( mouse == 'over' ) { // マウスポインタをラジオボタンの上に合わせたとき
document . getElementById( id ) . style . backgroundColor = 'cadetblue'; // id属性の値が、変数idの値である要素の背景色を変更
document . getElementById( id + '-label' ) . style . color = 'white'; // id属性の値が、変数idに"-label"を加えた値である要素の文字色を変更
} else if ( mouse == 'out' ) { // マウスポインタをラジオボタンの上から離したとき
document . getElementById( id ) . style . backgroundColor = 'white'; // id属性の値が、変数idの値である要素の背景色を元に戻す
document . getElementById( id + '-label' ) . style . color = 'black'; // id属性の値が、変数idに"-label"を加えた値である要素の文字色を元に戻す
}
}
// -->
</script>
cadetblue、white、black の部分を、カラーネームもしくはカラーコードで変更することにより、他の色を使うことができる。
CSS
<style type="text/css">
<!--
form#form-1 div { /* IDが、form-1 の form 要素内の div 要素 */
background-color : white; /* 背景色 */
color : black; /* 文字色 */
padding: 0px 0px 2px 5px; /* 内側の余白: 上 右 下 左 */
display: inline; /* 表示形式: インライン */
}
form#form-1 label { /* IDが、form-1 の form 要素内の label 要素 */
padding: 0 10px 0 2px; /* 内側の余白: 上 右 下 左 */
color : black; /* 文字色 */
}
-->
</style>
<!--
form#form-1 div { /* IDが、form-1 の form 要素内の div 要素 */
background-color : white; /* 背景色 */
color : black; /* 文字色 */
padding: 0px 0px 2px 5px; /* 内側の余白: 上 右 下 左 */
display: inline; /* 表示形式: インライン */
}
form#form-1 label { /* IDが、form-1 の form 要素内の label 要素 */
padding: 0 10px 0 2px; /* 内側の余白: 上 右 下 左 */
color : black; /* 文字色 */
}
-->
</style>
HTML
onMouseOver="changeColor()"
div 要素内のイベント属性の onMouseOver で、JavaScript の changeColor() を呼び出している。
onMouseOut="changeColor()"
div 要素内のイベント属性の onMouseOut で、JavaScript の changeColor() を呼び出している。
changeColor()
changeColor()の引数は、（ over もしくは out , div 要素の id の値 ）となっている。
一つ目の引数
onMouseOver で呼び出すときは、over を指定。
onMouseOut で呼び出すときは、out を指定。
ラジオボタン項目を増やすには
<div id="radio-0" onMouseOver="changeColor( 'over', 'radio-0' )" onMouseOut="changeColor( 'out', 'radio-0' )">
<input type="radio" name="music" value="ポップ" id="rock" checked><label for="rock" id="radio-0-label"> ポップ</label>
</div>
<input type="radio" name="music" value="ポップ" id="rock" checked><label for="rock" id="radio-0-label"> ポップ</label>
</div>
の部分を増やすことで、ラジオボタン項目を増やすことができる。
“radio-0” と “radio-0-label” の数字の部分は、0、1、2、3、4 ・・・のように、0 からの連番を指定。例えば、ラジオボタン項目が3つの場合、最後のラジオボタン項目はの数字部分は、2 となる。