ボタンの変更

ボタンに触れると、文字と色が変わります。離れると、戻ります。

こちらが、サンプルです。

ソース表示です。

<p> <input type="button" onMouseover="this.value='-go!-'; this.style.color='red'" onMouseOut="this.value='ready'; this.style.color='black'" value="ready"> </p>

解説です。

<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 : ホームに戻る

Presented by Rei

テレワークならECナビ Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜!
無料ホームページ 無料のクレジットカード 海外格安航空券 海外旅行保険が無料! 海外ホテル