formの送信ボタンをオンマウスで切り替える

2018年5月25日2019年5月23日

ご無沙汰していてすっかり忘れてしまっていたので備忘録に。

お問い合わせフォームなど<form>の送信ボタンを画像にしているとき、ホバー時（ボタンにマウスがのっているとき）に画像を差し替える方法。

cssは使いません。
以前書きました、ショップサーブの外部貼り付け用注文フォームなどにも使えます。

<form>
..
..
..
<input src="(画像URL−1)"  onmouseover="this.src='(画像URL−2)'" onmouseout="this.src='(画像URL−1)'" type="image" />
</form>

これで通常時は画像−1に。マウスがのっているときは画像−2に。マウスが離れると再び画像−1に戻ります。

前のhoge-Tシャツで適当につくったサンプルが以下です。

デモページ