フォームなどのinputタグで、ボタンにカーソルを合わせた時、画像を変えたい場合がある。
このとき、typeが「image」だと簡単にいかず、わざわざ「submit」に変えるなどメンドイことが多い。

一見すればhoverで一発で出来るような、こんな単純な部分にJavascript書いたり、バックグラウンドにしてimageを非表示にしたり、余計なことはしたくない。

そこで、最小限の労力でinputタグのtype=”image”のパターンについて、対処方法をメモ。

<input type="image" name="sample" src="./img/btn.jpg" 
onmouseover="this.src='img/btn_over.jpg'" 
onmouseout="this.src='img/btn.jpg'" />

これは、onmouseoverとonmouseoutという属性を使って、
カーソルを合わせる前は、「btn.jpg」を表示
カーソルを合わせた時は、「btn_over.jpg」を表示
カーソルをはずした時は、「btn.jpg」を表示
ということを実現する。

この2つの属性はセットで使うこと。