マウスポインタを特定の要素の上に合わせると、特定の要素の背景色を特定の色へ変えるサンプル。
ロールオーバー・ロールアウトで背景色を変える JavaScript と同様、引数に、背景色を変えたい要素のIDと、背景色を指定し、関数を呼び出す方法。
実装例
ロールオーバー・ロールアウトでテキストの背景色を変える
ロールオーバー・ロールアウトでリンクテキストの背景色を変える
| ロールオーバー・ロールアウトで テーブルのセルの背景色を変更1 |
ロールオーバー・ロールアウトで テーブルのセルの背景色を変更2 |
実装例の動作について
- マウスポインタを、「ロールオーバー・ロールアウトでテキストの背景色を変える」のテキストの上に合わせると、テキストの背景色が赤に変わる。
- マウスポインタを、「ロールオーバー・ロールアウトでリンクテキストの背景色を変える」のリンクテキストの上に合わせると、リンクテキストの背景色がベージュ（#ffff99）に変わる。
- マウスポインタを、「ロールオーバー・ロールアウトでテーブルのセルの背景色を変更1」のセルの上に合わせると、セルの背景色がピンク（#ffccff）に変わる。
- マウスポインタを、「ロールオーバー・ロールアウトでテーブルのセルの背景色を変更2」のセルの上に合わせると、セルの背景色が水色（#ccffff）に変わる。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function changeBackgroundColor( id, color ){
document.getElementById( id ).style.backgroundColor = color;
}
// -->
</script>
<!--
function changeBackgroundColor( id, color ){
document.getElementById( id ).style.backgroundColor = color;
}
// -->
</script>
HTML
<font id="cbc1" style="background-color:blue;color:white;" onMouseOver="changeBackgroundColor( 'cbc1', 'red' )" onMouseOut="changeBackgroundColor( 'cbc1', 'blue' )">ロールオーバー・ロールアウトでテキストの背景色を変える</font>
<a href="#" id="cbc2" style="background-color:wihte;" onMouseOver="changeBackgroundColor( 'cbc2', '#ffff99' )" onMouseOut="changeBackgroundColor( 'cbc2', '#ffffff' )">ロールオーバー・ロールアウトでリンクテキストの背景色を変える</a>
<table>
<tr>
<td id="cbc3" style="background-color:#ffffcc;" onMouseOver="changeBackgroundColor( 'cbc3', '#ffccff' )" onMouseOut="changeBackgroundColor( 'cbc3', '#ffffcc' )">ロールオーバー・ロールアウトで<br />テーブルのセルの背景色を変更1</td>
<td id="cbc4" onMouseOver="changeBackgroundColor( 'cbc4', '#ccffff' )" onMouseOut="changeBackgroundColor( 'cbc4', '#ffffff' )">ロールオーバー・ロールアウトで<br />テーブルのセルの背景色を変更2</td>
</tr>
</table>
<a href="#" id="cbc2" style="background-color:wihte;" onMouseOver="changeBackgroundColor( 'cbc2', '#ffff99' )" onMouseOut="changeBackgroundColor( 'cbc2', '#ffffff' )">ロールオーバー・ロールアウトでリンクテキストの背景色を変える</a>
<table>
<tr>
<td id="cbc3" style="background-color:#ffffcc;" onMouseOver="changeBackgroundColor( 'cbc3', '#ffccff' )" onMouseOut="changeBackgroundColor( 'cbc3', '#ffffcc' )">ロールオーバー・ロールアウトで<br />テーブルのセルの背景色を変更1</td>
<td id="cbc4" onMouseOver="changeBackgroundColor( 'cbc4', '#ccffff' )" onMouseOut="changeBackgroundColor( 'cbc4', '#ffffff' )">ロールオーバー・ロールアウトで<br />テーブルのセルの背景色を変更2</td>
</tr>
</table>
解説
JavaScript
<script type="text/javascript">
<!--
function changeBackgroundColor( id, color ){ // 引数を変数idと変数colorに代入
document.getElementById( id ).style.backgroundColor = color; // id属性の値が、変数idの値である要素の背景色を変更
}
// -->
</script>
<!--
function changeBackgroundColor( id, color ){ // 引数を変数idと変数colorに代入
document.getElementById( id ).style.backgroundColor = color; // id属性の値が、変数idの値である要素の背景色を変更
}
// -->
</script>
HTML
onMouseOver="changeBackgroundColor()"
イベント属性の onMouseOver で、JavaScript の changeBackgroundColor() を呼び出している。
onMouseOut="changeBackgroundColor()"
イベント属性の onMouseOut で、JavaScript の changeBackgroundColor() を呼び出している。
changeBackgroundColor()
changeBackgroundColor()の引数は、（ 背景色を変える要素のID, 背景色 ）となっている。