ボタン

リンクをテキストに埋め込む他に、ボタンでするのもいいですね?ボタンを押すということは、訪れた人が確実に意識してする行為だからでしょうか。自動でジャンプする、戻る、閉じるというページを作ったときには、ブラウザによってサポートされていない場合も考えて、同時にそういうボタンを設置しておくようにしています。

 

 ボタンで戻る

新たにボタンを作らないで、テキストから直前のページに戻るようにするには次のようにします。茶色の部分と「このページにはブラウザの「進む」でお戻りください」を入れると、ステータスバーにコメントとして表示されます。go(-1)back() は同じ結果になります。サンプルからこのページへは、ブラウザの「進む」でお戻りください。ちょっとヤヤコシイですね?

 

<A HREF="javascript:history.back(-1)" onMouseover="window.status='このページにはブラウザの「進む」でお戻りください';return true"
onMouseout="window.status='';return true"
>戻る</A>

 

戻る  戻る

 

「戻る」または「close」などをボタンに入れるには、次のようにします。これも茶色の部分を入れることで、ステータスバーにコメントを出せます。

 

<P><input type="button" value="戻る" OnClick="history.back();" onMouseover="window.status='直前のページに戻ります';return true"
onMouseout="window.status='';return true"
></P>

 

 

ここでイタズラです。○△1.htmlから○△2.htmlを経てきた、ここ○△3.htmlから「戻る」とすると、普通は○△2.htmlに戻るわけでしょう?で、あるページで history.go(-2) としました。こうすると○△3.htmlから1つ飛び越えて○△1.htmlに戻ります。 history.go(-3) とすると、2つ飛び越えて戻るわけです。よかったらちょっと下のボタンで試してみませんか?エッ?ばれちゃいました?history.go(-3) にしてあったんです。なお history.go(0) とすると、更新します。

 

<P><input type="button" value="戻る" OnClick="history.go(-3);" ></P>

 

 

 ボタンで閉じる

ウィンドウを閉じます。ステータスバーに表示する場合は、茶色の部分を入れます。

 
<A HREF="javascript:window.close()" onMouseover="window.status='本当にウィンドウを閉じますか?';return true"
onMouseout="window.status='';return true"
>閉じる</A>

 

サンプル

 
ボタンに入れるには、次のようにします。これも茶色の部分を入れることで、ステータスバーにコメントを出せます。

 

<P><CENTER><input type="button" value="閉じる" onclick="window.close()" onMouseover="window.status='さようなら、またお会いしましょう♪';return true"
onMouseout="window.status='';return true"
></CENTER></P>

 

 サンプル

 

 ボタンでウィンドウを開く

「ウィンドウの工夫」のウィンドウをボタンでシンプルに開くのように、ボタンで新しいページを開くこともできます。まずウィンドウのサンプルをクリックして出しみてください。で、同じものをボタンのクリックで出して比べてみましょう。前のが消えちゃった?そうですね。でも微妙に違うことが分かると思います。またボタンの場合は、status bar にリンク先が出てこないのが長所です。コメントやリンク先を示したければ、できないことはありませんが、それならボタンの必要がありませんね?このボタンは次のようになっています。

なおボタンで開いたページから元のページに戻れないようにすることもできますが、それについてはリンクを参照して下さい。

 

<input type="button" value="開けゴマ"
onClick=window.open("
../window/sample_3.html")>

 

 

 

 ボタンの文字や背景に色をつける

"button" の後ろに16進数のRGBか事前定義色などで指定することで、ボタンの中の文字や背景に色をつけられます。ここでは文字色を濃いグリーンに、背景色は淡いグリーンにしてみました。

 
<input type="button" style="color:darkgreen; background-color:lightgreen" value="開けゴマ"
onClick=window.open("
../window/sample_3.html")>

 

 

 

 お気に入りに追加するボタン

Windows版のIEにしか使えませんが、訪問者のブラウザのお気に入りに追加するボタンができます。このページでは<BODY> タグの後に <FORM> があるので入れていませんが、無い場合には、タグの前に <FORM> を、後ろに </FORM> を入れる必要があります。

 
<P><CENTER><INPUT type="button" value="お気に入りに追加" onclick="javascript:window.external.addFavorite('http://members.jcom.home.ne.jp/chat-noir/entrada/','すぐ役に立つホームページのプチアイディア集')"></CENTER></P>

 

 

フレーム無しの目次

直前のページ

フレームを回復

 
SEO [PR] !uO z[y[WJ Cu