ボタン改造

よくいろんなとこで見かける「ボタン」ありますよね？
こんな風に↓押すとヘコむやつ

本来はボタンを押した時にJavaScriptやVBScriptなどを動作
させる為にあるのですが、結構使い道があるので覚えておきましょ。
まず基本的なボタンの作り方から説明します。

※ボタンのコメント文を改行するときは
半角の\nで改行してください。

★基本的なボタン★
ソース記述例 説明
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"onClick=alert('コメント文')></INPUT></FORM> シンプルなボタンです。
（注）コメント文を改行するときは<BR>タグは使わずに\nで改行してください。
表示例↓
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"onClick=if(confirm('質問')==true){alert('ＯＫ時のコメント')}else{alert('キャンセル時のコメント')}></INPUT></FORM> ボタンを押した時の選択肢によって表示するコメント文を変えられます。
（注）コメント文を改行するときは<BR>タグは使わずに\nで改行してください。
表示例↓
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"onClick=top.location.href='リンク先のURL'></FORM> ボタンを押すとページをジャンプするリンク設定もできます。
表示例↓
★ボタンの色を変える★（ＩＥのみ）
ソース記述例 説明
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"onMouseover="this.style.color='red'" onClick=alert('コメント文')></INPUT></FORM> ボタンの上にマウスが重なると文字色が変わります。
onMouseover="this.style.color='red'"
↑のredの部分を好きな色名かＲＧＢ形式での色指定に書き換えてくださいね。
表示例↓
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"onMouseout="this.style.color='black'"
onMouseover="this.style.color='red'"onClick=alert('コメント文')></INPUT></FORM>		 マウスを離すと色が元に戻るようにする場合は、
onMouseout="this.style.color='black'"
↑の記述を追加してください。
black以外の色にすることも出来ます。
表示例↓
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"onClick=alert('コメント文') style="COLOR:red;BACKGROUND-COLOR:white; BORDER-COLOR:yellow"></INPUT></FORM> <INPUT>タグの中にstyle=で色指定をします。（ＩＥのみ）
表示例↓

COLOR:red;
ボタンの文字色の指定。ここでは赤。
BACKGROUND-COLOR:white;
ボタンの色指定。ここでは白。
BORDER-COLOR:yellow
ボタンの枠線の色指定。ここでは黄色。
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"style="COLOR:red;BACKGROUND-COLOR:white; BORDER-COLOR:yellow"onClick=if(confirm('質問内容')==true){alert('ＯＫを押した場合のコメント')}else{alert('キャンセルを押した場合のコメント')} ></INPUT></FORM> 質問アラートのボタンにも同じように色指定ができます。（ＩＥのみ）
表示例↓
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"style="COLOR:red;BACKGROUND-COLOR:white; BORDER-COLOR:yellow"onClick=top.location.href='リンク先のURL'></FORM> リンク設定をしたボタンにも同じように色指定ができます。（ＩＥのみ）
表示例↓
★ボタンの枠線を変える★（ＩＥのみ）
ソース記述例 説明
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"style="COLOR:red;BACKGROUND:white; BORDER-COLOR:yellow;BORDER-STYLE:solid;BORDER-WIDTH:10px"onClick=alert('コメント文') ></INPUT></FORM> BORDER-COLORとBORDER-STYLEとBORDER-WIDTHを別々に指定します。（ＩＥのみ）
表示例↓

BORDER-STYLE:solid;
枠線のスタイルをsolid（実線）に指定しています。doubleやinset等ほかのスタイルも指定できます。
BORDER-WIDTH:10px;
枠線の太さを指定。ここでは10ピクセル。
・実線の枠だと平面的なボタンになりますね。相変わらず押せばヘコみますが（笑）
★ボタンに壁紙★（ＩＥのみ）
ソース記述例 説明
<FORM><INPUT TYPE="button"VALUE="ボタンの文字"style="COLOR:red;BORDER-COLOR:yellow;BACKGROUND-IMAGE:url(背景画像のURL)"onClick=alert('コメント文') ></INPUT></FORM> ボタンの背景に壁紙を貼ることもできます。（ＩＥのみ）
表示例↓

BACKGROUND-IMAGE:url(背景画像のURL)
↑のカッコ内に背景画像のある場所までのURLを記述してください。

★ボタンサンプル★
ソース記述例 説明
<FORM>
<INPUT TYPE="button"
VALUE="(*/∇＼*) キャ☆"
onClick="this.style.display='none'" onMouseout="this.style.color='#000000'" onMouseover="this.style.color='#FF1493'">
</INPUT>
</FORM>		 クリックすると消えるボタンです。
（注）消えてもリロードすればまた表示します。
消えるのはIEのみでNNでは消えません。。
表示例↓
<FORM> <INPUT TYPE="button" VALUE="メッセージ表示後に消えるよ" onClick="alert('なお、このメッセージは自動的に消滅する…\nby Ciel');
this.style.display='none'"> </INPUT> </FORM>
</INPUT>
</FORM>		 クリックするとメッセージを残して消えるボタンです。
（注）消えてもリロードすればまた表示します。
消えるのはIEのみでNNでは消えません。。
表示例↓
<FORM> <INPUT TYPE="button" VALUE="質問してから消えるよ" onClick="if(confirm('質問')==true){alert('ＯＫ時のコメント')}else{alert('キャンセル時のコメント')};
this.style.display='none'"> </INPUT> </FORM>
</INPUT>
</FORM>		 ↑のボタンを質問アラートにしてみました。
（注）消えてもリロードすればまた表示します。
消えるのはIEのみでNNでは消えません。。
表示例↓
<FORM> <INPUT TYPE="button" VALUE="ボタンが先に消えるよ" onClick="
this.style.display='none';alert('ほらね')"> </INPUT> </FORM>
</INPUT>
</FORM>		 先にボタンが消えてからメッセージを表示するパターンです。
（注）消えてもリロードすればまた表示します。
消えるのはIEのみでNNでは消えません。。
表示例↓
<FORM> <INPUT TYPE="button" VALUE="クリック" onClick="
this.style.display='none';if(confirm('ボタンに書いてあった文字は「クルック」だった？')==true){alert('ブブ〜〜！！クリックでした！')}else{alert('ピンポ〜ン！正解！！')}"> </INPUT> </FORM>
</INPUT>
</FORM>		 先に消えてからメッセージを表示するボタンを質問アラートにしてみました。
（注）消えてもリロードすればまた表示します。
消えるのはIEのみでNNでは消えません。。
表示例↓
<FORM><INPUT TYPE="button"
VALUE="押してみる？"
onClick="this.value='もう一度？'
;test0.style.background='gold';
test0.filters[0].apply();
test0.filters[0].transition=23;
test0.style.background='red';
test0.filters[0].play(2.0)">
<TABLE cellpadding="50">
<TD id="test0"style="background:gold;
filter:revealtrans()">
<FONT size="4" face="Courier New"color="blue">
<B>こんにちは☆</B></FONT>
</TD>
</TABLE>
</INPUT></FORM>		 ボタンを押すたびに背景がいろんな風に変化します。何に使うかは謎。。
（注）IEのみです。
表示例↓
こんにちは☆
* - * Top Page * - *

*iphone アプリ 開発
*太陽光発電