フォームなどの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つの属性はセットで使うこと。
