マウスポインタをラジオボタンの上に合わせると、色を反転(背景色と文字色を変化)させ、さらに、選択したラジオボタンの背景色を変え目立たせる。
ロールオーバーでラジオボタンの色を反転する JavaScript を、拡張したものだ。
実装例
実装例の動作について
- ポップ、ロック、テクノのラジオボタンの上に、マウスポインタを合わせると、ラジオボタンの色を反転(背景色と文字色を変化)させる。
- ポップ、ロック、テクノのラジオボタンの上から、マウスポインタを離すと、元のラジオボタンの色に戻す。
- ポップ、ロック、テクノの何れかのラジオボタンを選択(クリック)すると、背景色が変化する。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function onload() {
for ( num = 0; num < document . Form1 . music . length; num++ ) {
if ( document . Form1["music"][num] . checked ) {
document . getElementById( 'radio-' + num ) . style . backgroundColor = 'aquamarine';
document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black';
}
}
}
window.onload = onload;
function changeColor( mouse, id ) {
if ( mouse == 'over' ) {
document . getElementById( id ) . style . backgroundColor = 'cadetblue';
document . getElementById( id + '-label' ) . style . color = 'white';
} else if ( mouse == 'out' ) {
for ( num = 0; num < document . Form1 . music . length; num++ ) {
if ( document . Form1["music"][num] . checked ) {
var checked = 'radio-' + num;
} else {
document . getElementById( 'radio-' + num ) . style . backgroundColor = 'white';
document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black';
}
}
if ( id == checked ) {
document . getElementById( id ) . style . backgroundColor = 'aquamarine';
document . getElementById( id + '-label' ) . style . color = 'black';
}
}
}
// -->
</script>
<!--
function onload() {
for ( num = 0; num < document . Form1 . music . length; num++ ) {
if ( document . Form1["music"][num] . checked ) {
document . getElementById( 'radio-' + num ) . style . backgroundColor = 'aquamarine';
document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black';
}
}
}
window.onload = onload;
function changeColor( mouse, id ) {
if ( mouse == 'over' ) {
document . getElementById( id ) . style . backgroundColor = 'cadetblue';
document . getElementById( id + '-label' ) . style . color = 'white';
} else if ( mouse == 'out' ) {
for ( num = 0; num < document . Form1 . music . length; num++ ) {
if ( document . Form1["music"][num] . checked ) {
var checked = 'radio-' + num;
} else {
document . getElementById( 'radio-' + num ) . style . backgroundColor = 'white';
document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black';
}
}
if ( id == checked ) {
document . getElementById( id ) . style . backgroundColor = 'aquamarine';
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 onload() {
for ( num = 0; num < document . Form1 . music . length; num++ ) { // ラジオボタンの数だけループ
if ( document . Form1["music"][num] . checked ) { // チェック(選択)されている場合
document . getElementById( 'radio-' + num ) . style . backgroundColor = 'aquamarine'; // id属性の値が、"radio-" + 変数numの値 ("radio-0"など)である要素の背景色を変更
document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black'; // id属性の値が、"radio-" + 変数numの値 + "-label"("radio-0-label"など)である要素の文字色を変更
}
}
}
window.onload = onload; // ページを表示したとき、onload() を呼び出す
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' ) { // マウスポインタをラジオボタンの上から離したとき
for ( num = 0; num < document . Form1 . music . length; num++ ) { // ラジオボタンの数だけループ
if ( document . Form1["music"][num] . checked ) { // チェック(選択)されている場合
var checked = 'radio-' + num; // 変数checked に、"radio-" + 変数num を代入
} else { // チェック(選択)されていない場合
document . getElementById( 'radio-' + num ) . style . backgroundColor = 'white'; // id属性の値が、"radio-" + 変数numの値 ("radio-0"など)である要素の背景色を元に戻す
document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black'; // id属性の値が、"radio-" + 変数numの値 + "-label"("radio-0-label"など)である要素の文字色を元に戻す
}
}
if ( id == checked ) { // 変数id の値と 変数checked の値が等しいとき
document . getElementById( id ) . style . backgroundColor = 'aquamarine'; // id属性の値が、変数idの値である要素の背景色を変更
document . getElementById( id + '-label' ) . style . color = 'black'; // id属性の値が、変数idの値 + "-label" である要素の文字色を変更
}
}
}
// -->
</script>
<!--
function onload() {
for ( num = 0; num < document . Form1 . music . length; num++ ) { // ラジオボタンの数だけループ
if ( document . Form1["music"][num] . checked ) { // チェック(選択)されている場合
document . getElementById( 'radio-' + num ) . style . backgroundColor = 'aquamarine'; // id属性の値が、"radio-" + 変数numの値 ("radio-0"など)である要素の背景色を変更
document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black'; // id属性の値が、"radio-" + 変数numの値 + "-label"("radio-0-label"など)である要素の文字色を変更
}
}
}
window.onload = onload; // ページを表示したとき、onload() を呼び出す
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' ) { // マウスポインタをラジオボタンの上から離したとき
for ( num = 0; num < document . Form1 . music . length; num++ ) { // ラジオボタンの数だけループ
if ( document . Form1["music"][num] . checked ) { // チェック(選択)されている場合
var checked = 'radio-' + num; // 変数checked に、"radio-" + 変数num を代入
} else { // チェック(選択)されていない場合
document . getElementById( 'radio-' + num ) . style . backgroundColor = 'white'; // id属性の値が、"radio-" + 変数numの値 ("radio-0"など)である要素の背景色を元に戻す
document . getElementById( 'radio-' + num + '-label' ) . style . color = 'black'; // id属性の値が、"radio-" + 変数numの値 + "-label"("radio-0-label"など)である要素の文字色を元に戻す
}
}
if ( id == checked ) { // 変数id の値と 変数checked の値が等しいとき
document . getElementById( id ) . style . backgroundColor = 'aquamarine'; // id属性の値が、変数idの値である要素の背景色を変更
document . getElementById( id + '-label' ) . style . color = 'black'; // id属性の値が、変数idの値 + "-label" である要素の文字色を変更
}
}
}
// -->
</script>
cadetblue、aquamarine、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 となる。