フォームの送信ボタンは、通常次のように input タグを使って生成します。
| <input type="submit" name="next" value="Next"> |
しかし、このようなボタンではそっけないため、イメージを使ったボタンを良く見かけますよね。
 |
<input type="image" src="images/normal.gif" name="next" value="Next"> |
このように input タグを使って、好みのイメージボタンを代用することができますが、ちょっと物足りないと思いませんか？実は、ボタンを押しても、押したというクリック感を表現できていないからなんです。前述のフォームボタンはそっけないボタンではありながらも、ボタンをマウスでクリックすると、ボタンが凹んだ感じになりますよね。イメージボタンでも、このような演出ができれば、利用者も安心するものです。このような演出をするかしないかは、好みの問題だと思われる方もいらっしゃるでしょう。フォームボタンを押してからすぐにサーバからレスポンスが来るのであれば、このような演出をしなくても、利用者は特に違和感を感じません。しかし、サーバのレスポンスが遅い場合には、クリックしたという感覚が無いと、不安になり何度もボタンを押してみるものです。この演出は、無いよりはあったほうが良いのです。
ここでは、イメージボタンでクリック感を表現する方法を解説していきます。まずはサンプルをご覧下さい。
|
マウスをボタンの上に置くとボタンの色が明るくなり、ボタンを押すと、ボタンイメージが下がります。いかがですか？利用者から見れば、安心感のあるボタンになったと思いませんか？これは、事前に 3 種類のボタンイメージを用意しておき、マウスのアクションに応じて表示するボタンイメージを切り替えているのです。それぞれのボタンイメージは次の通りです。
| ボタンイメージ | ファイル名 | 呼び出すタイミング |
|
normal.gif | デフォルト（何もボタン操作がされていないときに表示する） |
 |
over.gif | マウスポインタがボタンの上に乗ったときやフォーカスがあたったとき（normal.gif より若干明るくなっていることに注目） |
 |
down.gif | ボタンが押されたとき（クリック感を表現するために、over.gif と比べて右下にボタンをずらしていることに注目） |
次に、ボタンの部分の HTML を見てみましょう。
<img src="images/normal.gif" height="28" width="100" name="button" value="Next" onMouseOver="highlightButton()" onFocus="highlightButton()" onMouseOut="darkenButton()" onMouseDown="pushButton()" onMouseUp="submitForm()">
フォームの送信ボタンにもかかわらず、input タグを使っていないことに注意して下さい。ただ単に img タグを使っているだけです。しかし、各イベントハンドラに注目して下さい。ここで使っているイベントハンドラは次の通りです。
| イベントハンドラ | 呼び出す関数 | イベントハンドラの意味 |
| onMouseOver | highlightButton() | マウスポインタがオブジェクトの上に乗ったとき |
| onFocus | highlightButton() | 該当のオブジェクトにフォーカスがあたっているとき |
| onMouseOut | darkenButton() | マウスポインタがオブジェクトから外れたとき |
| onMouseDown | pushButton() | マウスのボタンを押した時 |
| onMouseUp | submitForm() | マウスのボタンを押した後、それを戻した時（押しっぱなしの状態では有効にならないことに注意） |
ボタンに対してマウスで何かしらのアクションが発生するたびに、関数が呼び出されるようにしているのです。各関数ではボタンイメージを切り替える処理を担っています。それぞれの JavaScript 関数は次の通りです。
<script language="javascript">
<!-- //
function highlightButton() {
document.button.src='images/over.gif';
}
function pushButton() {
document.button.src='images/down.gif';
}
function darkenButton() {
document.button.src='images/normal.gif';
}
function submitForm() {
document.formname.submit();
}
// -->
</script>
関数 highlightButton(), pushButton(), darkenButton() は、ただ単に表示するボタン画像を切り替えるだけの簡単な処理です。"button"の部分は、img タグで指定された name 属性値です。特に "button" とする必要はなく、img タグで指定した name 属性値にあわせて下さい。
関数 submitForm() ですが、これはボタンがマウスで押され、そのボタンを離した際に、イベントハンドラ onMouseUp により呼び出されます。"document.formname.submit();" により、input タグの submit ボタンと同等の処理が実行され、正しくサーバに入力値が送信されるのです。"formname"は、form タグに指定された name 属性値です。従って、form タグは、次の様に name 属性値を指定して下さい。
<form name="formname" action="http://xxxxx/cgi-bin/xxx.cgi" method="post">