ロールオーバーでラジオボタンの色を反転

マウスポインタをラジオボタンの上に合わせると、色を反転(背景色と文字色を変化)させる。

実装例

実装例の動作について

  • ポップ、ロック、テクノのラジオボタンの上に、マウスポインタを合わせると、ラジオボタンの色を反転(背景色と文字色を変化)させる。
  • ポップ、ロック、テクノのラジオボタンの上から、マウスポインタを離すと、元のラジオボタンの色に戻す。

ソースコード

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>

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>

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>

解説

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>

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>

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>

の部分を増やすことで、ラジオボタン項目を増やすことができる。
“radio-0” と “radio-0-label” の数字の部分は、0、1、2、3、4 ・・・のように、0 からの連番を指定。例えば、ラジオボタン項目が3つの場合、最後のラジオボタン項目はの数字部分は、2 となる。

スポンサード リンク

カテゴリー: JavaScript, フォーム, 逆引き パーマリンク