ロールオーバー・ロールアウトで背景色を変更

マウスポインタを特定の要素の上に合わせると、特定の要素の背景色を特定の色へ変えるサンプル。
ロールオーバー・ロールアウトで背景色を変える 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>

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>

解説

JavaScript

<script type="text/javascript">
<!--
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, 背景色 )となっている。

スポンサード リンク

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