イメージボタン「そのまま使える」サンプル

JavaScript そのまま使えるサンプル集、第１段はイメージボタンだよぅ。はい、今こそ約束を果たします（笑）使ってやってください。対応ブラウザは InternetExplorer 4, Netscape4, Opera6 以上かな。

まずは JavaScript はよく分からないケド簡単に使いたい人に、そのまま使えるサンプル！

ファイル名： basedsystem.js

<SCRIPT language="JavaScript" src="basedsystem.js"></SCRIPT>

ファイル名： imagebuttonsystem.js

<SCRIPT language="JavaScript" src="imagebuttonsystem.js"></SCRIPT>

それぞれテキストファイルにファイル名をつけて、ページと同じフォルダに保存。
<SCRIPT～</SCRIPT>の記述を HTML の HEAD に追加してください。順番は変えないでね。 basedsystem.js が先だよ。続けて

という風にファイル名を指定する記述を追加してね。LoadImgBtn の行が画像のファイル名に対応しているよ。使いたいボタンの画像の種類の数だけこの行を書けば OK ！ ButtonName はボタンにつける名前で、英数字半角で記号は _（アンダーバー）以外は使わない方がいいかな。何でも良いけど同じ名前を他で使わないように、一つのボタンの種類に一つの名前を付ける事。後はファイル名の指定なんだけど、これは画像ファイルを用意する時に

という風に名前を付けておくと、そのまま共通の部分、オン（マウスカーソルで変更された画像）の名前の部分、オフ（通常の画像）の名前の部分、後ろの共通部分（拡張子など）、という順で指定できるよ。
※この例では on, off の o は共通だから "FileName_o", "n", "ff", ".JPG" て書けるけど、 SHIN-ICHI はわかりやすいように分けて書くよ。ファイルがフォルダの中とか別のパスにあるときは、その部分も忘れないようにね。＜例＞FolderName/FileName_

ここまで追加できたら、普段使ってるホームページ作成ソフトでいいから、普通にホームページを作ろう！ボタンにする画像には、オフの画像を指定して、リンクを貼ってね。出来たらそのボタン画像は次のようなソースになってるはず何だけど・・・ソース表示してみてね。

これにイメージボタン機能を追加するよ！次の記述を追加してね。

ButtonName はさっきつけたボタンの種類の名前。X にはそのボタンの番号をつけてね。同じ種類のボタンを何度も使う場合、区別するための番号だよ。同じ種類のボタンを一つしか使わない時には、何も書かなくていいよ。＜例＞btnOut('ButtonName', '') 　name="ButtonName"
それぞれ何とか=何とかごとの区切りはスペースでちゃんと開けてね。全部半角英数字だよ。

全部出来たら保存して、これで完成！ここのトップページみたいに、マウスカーソルをあわせると画像が変更されるイメージボタンになってるはずだよ。どう？出来た？完璧だね！アップするとき、2つの js ファイルを忘れないようにね。後は君が格好いいボタンを描くセンスと技術を持っているか？だけだね？え？そんなの自信ないって？そうかぁ、じゃぁ、SHIN-ICHI のぐらいで良ければ描ける方法を教えるよ。いくらでも！でもその話はまた今度にして、それじゃぁ解説行きますか。