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