戻るボタンを使おう
戻る／進むボタンは便利なボタン。
ページから移動させる方法が リンクボタン ですね。リンクの使い方はこれまでに習得されていると思います。
リンクはこんな書き方でしたね。
<A HREF="https://www.google.com/">グーグルへ飛ぶ。</A>
|
一方で、サイトを行ったり来たりする場合は、 戻る／進む というボタンが欲しくなります。
本道場でもサンプルから元のページに戻って頂くボタンを何度か使っていました。お気付きですよね...、ねっ？。
サンプルを見て頂きましょうか。●ココをクリック●して下さい。
妙な画像は無視するとして、戻るボタンのタグを披露しますね。下記の１行です。
<input type="button" value="戻る" onclick="history.back()">
|
冒頭のリンクで戻す場合は、戻し先のＵＲＬが変更になった時などにアドレス修正が必要になります。この戻るボタンの場合は、
そういうＵＲＬ修正が不要です。
さて、ホームページを彼方此方と放浪した場合には戻るボタンだけでなく進むなど他の機能も必要になりますね。
必要になりそうな４つのボタンを置いてみましょう。
４つセットでＨＴＭＬ文に書く場合はFORMタグを使うと便利です。
<form>
<input type="button" value="戻る" onclick="history.back()">
<input type="button" value="更新" onclick="location.reload()">
<input type="button" value="進む" onclick="history.forward()">
<input type="button" value="トップページ">
<onclick="location.href='https://misteroz.net/HPschool-menu.html'">
</form>
|
onclick="location.href='http：//www〜〜〜の部分には設定したいトップページのURLを入れて下さいね。
ボタンでの表示には好き嫌いがあるようですね。そこで画像アイコンを使って戻る／進むを機能させる方法もお教えしておきましょう。
（画像アイコンは、『お菊巧芸』からお借りしました）
こんな感じになります。タグは下記の通りです。
<A href="javascript:history.back()"><IMG src="back.gif" border=0></A>
<A href="javascript:history.forward()"><IMG src="next.gif" border=0></A>
|
以上の機能をご理解頂いたら、この項は修了です。
|