画像を使用したフォームボタンの落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　フォームを使用したページで、グラフィカルなインターフェイスを保つために送信ボタン（SUBMIT）などに画像を用いる場合、【1】のコードを使おう。さらに、その画像をロールオーバーさせたいときには、＜INPUT＞タグ内にonMouseOverでオーバー時のイメージを参照するように記述する必要がある。もちろんonMouseOutでマウスが外れたときに元のイメージを表示させる記述を忘れてはいけない【2】。

　ここで一点、注意しなければならないことがある。たとえば、Dreamweaverでビヘイビアの追加からスワップイメージを選択した場合、＜head＞タグ内にJavaScriptが記述され、実際に指定した画像がonMouseOverでそのJavaScriptを参照してロールオーバーするのだが、この記述をそのまま＜INPUT＞タグ内に書き込んだのではロールオーバーは動作しない。アプリケーションソフト頼みで作成しないように気をつけよう。

解説：横山 剛

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）