ボタンに触れると、文字と色が変わります。離れると、戻ります。
こちらが、サンプルです。
ソース表示です。
解説です。
<p>〜</p>
inputは、インライン要素で、bodyに直接書いてはいけないので、pで囲ってます。pの代りにdivでもいいです。
<input type="button"
でボタンを作ってます。textでもいいです。その場合はnameを付けましょう。
onMouseover=
で、マウスが触れた時に、実行します。
this.value='-go!-'; this.style.color='red'
thisで、このinputを指します。
valueで、valueの中身を入れ替えます。
style.colorで、色を変えます。backgroundColorだと、ボタンの背景が変わります。 例
onMouseOut=
マウスが離れた時に実行します。
this.value='ready'; this.style.color='black'
もとに戻しておきます。
value="ready"
始めに表示される文字です。変更後と文字数が変わると、ボタンの大きさも変わりますので、違うときは、スペース等で調節しましょう。goだと、大きく変わるので、-go!-としてます。
Next : 次のサンプルへ Rev : 前のサンプルへ Up : JavaScript-Sampleに戻る Home : ホームに戻る