ＨＰで使えるボタン（２）


画像を使ったボタン

Web ページ上でリンクをはるときに、文字の代わりに画像を使うことが最近ではごく普通になってきています。 特に、ページからページへ移るときや、ページ内を移動するときにボタンを模した画像やアイコンがよく使われますが、どうせなら動きのあるボタンを作ってみましょう。

「Image オブジェクトを使う」でも紹介したように、画像がカーソルやマウスクリックに反応するためには、Image オブジェクトを作ってスクリプトで操作できるようにしなければなりません。 まず、１．デフォルト（ページが最初に読み込まれたとき）の画像、２．マウスカーソルがイメージの上に来たとき呼び出される画像、３．イメージ上をマウスクリックしたとき呼び出される画像、の３種類を用意します。 （３は必須というわけではありません。）仮に１を "gazo1.gif"、２を "gazo2.gif"、３を "gazo3.gif" とします。

ＨＴＭＬのヘッダー部（</TITE> と </HEAD> の間）に JavaScript で３つの Image オブジェクトを定義し、イベントで呼び出される関数 Change(num) を記述します。

<SCRIPT Language="JavaScript">
<!--
gazo1=new Image();
gazo1.src="gazo1.gif";
gazo2=new Image();
gazo2.src="gazo2.gif";
gazo3=new Image();
gazo3.src="gazo3.gif";

function Change(num) {
Br = navigator.appName;
Ver = navigator.appVersion;
if((Br=="Microsoft Internet Explorer" && parseInt(Ver.substring(0,1))>3) || (Br=="Netscape" && parseInt(Ver.substring(0,1))>2))
{
with(document)
{
if(num==1) gazo.src=gazo1.src;
else if(num==2) gazo.src=gazo2.src;
else gazo.src=gazo3.src;
}
}
}
//-->
</SCRIPT>

次にＨＴＭＬ本体の画像を表示する箇所に次のように書きます。

<A href="（ジャンプ先のＵＲＬ）" onMouseOver="Change(2)" onMouseOut="Change(1)" onmousedown="Change(3)">
<IMG src="gazo1.gif" name="gazo" border=0></A>

デフォルトの画像とマウスカーソルがイメージを離れたときの画像が同じであることに注意して下さい。変数名 gazo1、gazo2、gazo3 や、画像の NAME などはお好きに付けてかまいません。

下のサンプルのうち、左はエレベーターの上昇ボタンを模しています。右は、ムーンフェイスが愉快に変化します。クリックすると他のページにジャンプするのではなく、A href="javascript:alert('・・・')" でスクリプトのルーチンを呼び出します。

クリックするとトップに戻ります 僕をクリックして

以上は、Internet Explorer4.0 以上や Netscape Navigator3.0 以上で実行されます。但し Netscape Navigator3.0 ではマウスをクリックしたとき（onmousedown）のルーチンは実行されません。

画像の中で、丸や四角、多角形のボタンを使う場合は、クリッカブルマップを使います。クリッカブルマップの書き方はご存じかも知れませんが、ここでおさらいしましょう。

<IMG usemap="#（MAP name= で指定する MAP 名。例えば #MyMap）" src="（ベースとなる画像ファイルのアドレス）" border=0>
<MAP name="（例えは MyMap）">
丸の場合
<AREA shape="CIRCLE" coords="(円の中心点のｘ座標), (円の中心点のｙ座標), (円の半径)" href="（リンク先アドレス）">
四角の場合
<AREA shape="RECT" coords="(左上頂点のｘ座標), (左上頂点のｙ座標), (右下頂点のｘ座標), (左上頂点のｙ座標)" href="（リンク先アドレス）">
多角形の場合
<AREA shape="POLY" coords="(左上頂点のｘ座標、ｙ座標から反時計回りに各頂点のｘ，ｙ座標をコンマで分け、最後は起点に戻る" href="（リンク先アドレス)">
</MAP>

多角形の場合、左上から反時計回りに各ｘ、ｙ座標の数字を定義し、最後は必ず起点のｘ、ｙ座標で終わることに注意しましょう。

下のサンプルでは、ボタンをクリックすると他ページにジャンプする代わりにメッセージを表示します。各ボタンをクリックしてみて下さい。

Bottomputer 丸です 四角形です 三角形です 多角形です

ボタンコントロール

ボタンコントロールとは、システムのボタンを呼び出して Web ページ上に表示するものです。初期にはメッセージの送信（submit）やリセット（reset）用のボタンとして登場しましたが、現在では JavaScript などのスクリプトを実行するボタンとして用途も広くなりました。もちろん他のページにジャンプするためのリンク用としても使えます。 JavaScript を使ったボタンで他のページにジャンプするには次のように書きます。

<FORM>
<INPUT type="button" value="ホームに戻る" onClick="location.href='index.html'">
</FORM>

JavaScript を実行できないマイナー・ブラウザでもリンクボタンを使えるようにするには、次のように書きます。

<FORM action="index.html" method="get">
<INPUT type="submit" value="ホームに戻る">
</FORM>

これはつまりＨＴＭＬ3.2 でも用いられた submit ボタンを使っているのです。

ボタンの色はコントロールパネルでユーザーが決めるようになっているので、Web 製作者が決めることは出来ません。

これまで、Web ページのボタンコントロールには、文字しか表示できませんでしたが、ＨＴＭＬ4.0 になり、ボタン上にイメージを表示できるようになりました。 但し従来の <INPUT TYPE="button> ではなく、<BUTTON> タグという新しいタグです。現在の所、Internet Explorer4.0x のみ対応しているようです。 それ以外のブラウザではボタンそのものが表示されないので、代替方法を考慮する必要があります。

<FORM>
<BUTTON onClick="location.href="(ジャンプ先ファイル名)"><A href="(ジャンプ先ファイル名)">
<IMG src="(画像ファイル名)" width=(横幅) height=(高さ)" border=0> </A>
</BUTTON><BR><A href="(ジャンプ先ファイル名)">（リンク名）</A>
</FORM>

お役立ちソフト

IE 4.0x でボタンが押されたときに他のページにジャンプする動作を onClick= で規定していますが、他のブラウザでは画像と文字しか表示されないので、他のブラウザで画像か文字がクリックされたときのために A HREF= でリンク先を指定しています。

ボタンの中に文字も入れるには次のようにします。

<FORM><BUTTON onClick="(ジャンプ先ファイル名)"><A href="(ジャンプ先ファイル名)">
<IMG src="(画像ファイル名)" width=(横幅) height=(高さ)" border=0>（文字を画像の下に置くときは、ここに <BR> を入れる）リンク名 </A></BUTTON></FORM>

ブラウザによっては、上の３例はボタンではなく画像と文字としてしか表示されていないと思います。しかしそれでも画像か、文字をクリックすれば目的のページにジャンプできます。 新しいことをするときには、ここまで考慮しなければならないのです。



次のトピックは「ＨＴＭＬ間通信」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで