オンマウスでボタンの色をかえる
表示の例
マウスポインタをのせた時・はなした時に、ボタンの色をかえることができます。
このボタンのソースは下のようになります。
表示させたい場所のHTMLソースに貼り付けましょう。
(必ず一度メモ帳などに貼り付けてから、あなたのページのHTMLソースに貼り付けてください)
ソース
<FORM><INPUT type="button" value="ボタン" onClick="alert('マウスポインタをのせた時に、ボタンの色がかわります!')" style="border-style:solid; border-width:1px; border-color:#3366FF; background:#FFFFFF; font-size:10pt; color:#3366FF" onMouseOver="this.style.background='#CCCCFF'" onMouseOut="this.style.background='#FFFFFF'"></FORM>
下の表を見てあなたのお好みにかえてみましょう。
ボタンの外枠の太さ border-width:1px; の 1
ボタンの外枠の色 border-color:#3366FF; の #3366FF
ボタンの背景の色 background:#FFFFFF; の #FFFFFF
ボタンの文字の大きさ font-size:10pt; の 10
ボタンの文字の色 color:#3366FF の #3366FF
マウスをのせた時の色 onMouseOver="this.style.background='#CCCCFF'" の #CCCCFF
マウスをはなした時の色 onMouseOut="this.style.background='#FFFFFF'" の #FFFFFF
ホームページお役立ち小技集のTOPへ