リンク用のボタンを作る。   

ボタンは、formタグとinput type=”button”のタグで作れますが、これをクリックしたときの動作の設定は、Javaスクリプトが必要になります。

戻るボタンを作る

inputタグの中に、Onclick=”history.back()”を入れるだけで、ブラウザの←ボタンと同じ機能のボタンが作れます。   をクリックすると元に戻ります。このページに戻るには、ブラウザの→ボタンで戻ってください。
htmlの記述は、<input type=”button” value=”←” onclick=”history.back()”> です。

history.forward()とすると、→(進む)ボタンになります。これらはjavaの関数ですが、特に宣言しなくても使えるようです。( 正式には、javascript.history.back() )

history.go(−2)とすると、→ページを2つ戻ります。

いろいろなリンクボタンを作る

ボタンに、特定のアドレスのリンクを置くには、関数を作っておく必要があります。
function GoURL{location.href=url1}
のようにスクリプトで関数を宣言します。

htmlで<input type=”button” value=”名前” onclick=”GoURL(’アドレス’)”> とします。”の中に”は使えないので’でアドレスを囲みます。   

フレームを使っているときは、関数の記述を
parent.top.location.href=url1 や parent.***.location.href= (***はフレームの名前)にします。

リストボックスでリンクを作る

 このようなリストボックスを作り、複数のリンクを選択できるようにします。

フォームは、タグで書きますが、この選択が変化したときに対応するリンクへ飛ばすには、関数を宣言する必要があります。ここでは、Go1という関数を定義し、フォームnewspのインデックス番号でリンク先を指定します。

function Go1(nm){
if(nm.newsp.selectedIndex ==0) {location.href="main.htm"}
if(nm.newsp.selectedIndex ==1) {parent.top.location.href="http://www.nikkei.co.jp/cont.html"}
if(nm.newsp.selectedIndex ==2) {parent.top.location.href="http://www.asahi.com"}
if(nm.newsp.selectedIndex ==3) {parent.top.location.href="http://www.yomiuri.co.jp"}
if(nm.newsp.selectedIndex ==4) {parent.top.location.href="http://www.mainichi.co.jp/main.html"}
if(nm.newsp.selectedIndex ==5) {parent.top.location.href="http://www.sankei.co.jp"}
if(nm.newsp.selectedIndex ==6) {parent.top.location.href="http://www.yomiuri.co.jp/hochi/home.htm"}
}

フォームの記述に、onchange=Go1(this.form)を入れて、indexが変化したときにリンク先へ飛ぶようにします。関数の定義とformの記述を揃えます。

<form>
<select name=”newsp” onchange=Go1(this.form)>
<option>新聞を選択
<option>日経新聞
<option>***
</select>
</form>

チェックボックスでリンクを作る

Javaスクリプトの基礎 簡単で便利な応用 画像を変化させる ボタンを作る 念力テスト

上はラジオボタンを使って、onclickイベントでリンク先を変更する例です。この場合も関数が必要ですが、リンク先は引数で定義できるので、リンク先を変更しても関数の修正は不要になります。関数は、
function selecturl(w1){ location.href=w1 } で定義します。タグは、
<form>
<input type=radio onclick=selecturl(’アドレス’)>リンクの名前
< 同様に >
</form>  のように記述します。