Ｊａｖａアップレットを使ったピクチャーボタン




作成者から
サンプル
使い方
ダウンロード


作成者から



画像にリンクをはっただけではボタンに見えない！というわけでＪａｖａアップレットでボタンを作ってみた。ボタンに画像をはりつけられる。リンクもさせることができるし、フレームも対応！　していると思う。

つくってから思いました。Ｊａｖａ　Ｓｃｒｉｐｔの方が簡単なような・・・


インターネットエクスプローラ５．５では動作しています。それ以外は動作確認をしていないので動くかどうかは不明・・・動かない可能性が高い？？？


ピクチャーボタンのサンプル



こんなふうなボタンができます。
ちゅうい！　ここでは、わざとリンクをはってませんので、あしからず。ボタンの下のAPPLETタグをクリックするとボタンを表示させるためのAPPLETタグを表示しているページに行きます。




APPLETタグ


ピクチャーボタンの使い方



APPLETタグの書き方


アップレットを使うにはAPPLETタグを使います。APPLETタグは、次のように書きます。


<APPLET code="PictureButton.class" width=100 height=100>
<PARAM name="picture0" value="buttonDef.gif">
</APPLET>


codeには使うクラスファイルの名前を指定します。ファイル名は大文字と小文字を区別するよ。いまは、PictureButton.classというクラスファイルを使用します。
widthとheightはアップレットの幅と高さを指定します。これがボタンの大きさになります。自由に決めてもらっていいです。ここでは、１００×１００の大きさのボタンを作ることにします。また画像ファイルはbuttonDef.gifを使っています。画像ファイルはGIF形式かJPG形式であればたぶん何でもいいです。
PARAMタグはアップレットに渡すパラメータを指定します。上の場合は、アップレットに『picture0』という入れ物には『buttonDef.gif』という値がはいってますよと伝えています。nameやvalueに指定する値はアップレットによって違います。このアップレットでは、『picture0』には、GIF形式かJPG形式の画像ファイルを指定します。また、nameとvalueに指定する値はたとえ数値であっても""で囲まなければいけない。（value=0 という書き方はダメ！　value="0"　と書くこと）上のコードをHTMLファイルの好きなところにはりつけて、クラスファイルPictureButton.classと画像ファイルbuttonDef.gifをそのHTMLファイルと同じ場所に置くと、





のようなボタンが表示されます。これだけでは、単にボタンを表示させているだけなので、あまり意味はない。次は、これにリンクをつけましょう。PARAMタグで『url』にリンク先のHTMLファイルを指定します。


<APPLET code="PictureButton.class" width=100 height=100>
<PARAM name="picture0" value="buttonDef.gif">
<PARAM name="url" value="buttonTest.html">
</APPLET>


<APPLET></APPLET>の間にPARAMタグを追加します。このように、PARAMタグは必要なだけ付け加えることができます。このコードを書くと、次のボタンが表示されるはずです。こんどはちゃんと、ボタンを押すとリンク先にいけるでしょう？




パラメータの説明


PARAMタグでPictureButton.classに渡すことのできるパラメータの一覧です。
パラメータ・・・nameに指定する値です。
値・・・・・・・valueに指定する値です。
デフォルト・・・PARAMタグで指定しない時に使われる値です。


  パラメータ     デフォルト   値 説明
picture0 なし 画像ファイル名(GIF,JPG) 通常の状態の時の画像。マウスアウトの画像と呼ぶことにします。
picture1 なし 画像ファイル名(GIF,JPG) マウスがボタンの上にきた時の画像。マウスインの画像と呼ぶことにします。
picture2 なし 画像ファイル名(GIF,JPG) マウスを押した時の画像。マウスダウンの画像と呼ぶことにします。
color #A0A0A0 色(＃rrggbb) ボタンのバックグラウンドカラーです。ページの背景色と同じにするとボタンが浮き出てくるように見せることができます。
border 10 数値 ボタンの枠の大きさです。これを0にするとボタンが立体的に見えなくなります。またcolorの指定も意味がなくなります。画像を３つ（マウスアウト、マウスイン、マウスダウンの画像）作って、この値を0にするという方法もあります。
url なし   リンク先のｕｒｌです。
target なし   フレームを使っている場合に使います。ＨＴＭＬのＡタグのtargetと同じです。
type 0 0 通常は0にする。マウスアウトの画像だけ指定した場合は、マウスインもマウスダウンもこの画像が使われます。マウスアウトとマウスインだけ指定した場合はマウスダウンにはマウスインの画像が使われます。マウスアウトとマウスダウンだけ指定した場合はマウスインにはマウスアウトの画像が使われます。
1 1を指定すると、上記のようにかってに画像を使用しません。マウスアウトの画像だけ指定した場合は、マウスインとマウスダウンはボタンだけが表示され、画像は表示されません。この指定とraised="2"と指定するとマウスダウンの画像だけが表示され、隠しボタンのようなものができます。
raised 0 0 マウスインのとき飛び出して、マウスダウンのとき、へこみます。
1 マウスアウトのときも飛び出しています。
2 マウスダウンのときだけへこみます。




ピクチャーボタンのダウンロード


使用承諾


このアップレットの著作権は作成者にあります。使用する場合はメールでかまいませんので、使用したページのアドレスを教えてください。

Mail me!


ダウンロード


クラスファイル(PictureButton.class　4478バイト)のダウンロード