| ポイント |
<![CDATA[
obj.style.backgroundColor = col;
<button onMouseover="setColor(this,'yellow')" onMouseout="setColor(this,'#ffffff')">>ロールオーバーボタンです</button>
]]>
|
| 説 明 |
ボタン(buttonタグ)にマウスが乗ったらボタンの色を変えるにはボタンにイベントハンドラを記述し呼び出す関数に自分自身への参照（this）を渡します。関数側では渡されたオブジェクトへの参照のスタイルの背景色を設定します。thisを利用すると汎用性の高い関数になります。onMouseoverでマウスがボタンに重なった時、onMouseoutでマウスが離れた時の背景色の設定関数を呼び出します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>ボタンにマウスが乗ったらボタンの色を変える(buttonタグの場合)</title>
<script Language="JavaScript"><!--
function setColor(obj,col)
{
obj.style.backgroundColor = col;
}
// --></script>
</head>
<body>
<form>
<button onMouseover="setColor(this,'yellow')" onMouseout="setColor(this,'#ffffff')">>ロールオーバーボタンです</button>
</form>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
ボタンにマウスが乗ったらボタンの色を変える(buttonタグの場合)