input type="image"の画像ボタンにロールオーバーを簡単に追加します。
onmouseover="this.src='send_on.gif';" onmouseout="this.src='send.gif'"
をhtml内に記述。
リセットボタンをInputタグの画像type=”image” が使えないので、jsとlinkで実装。
CSSでの実装はこちら↓
CSSでinput画像ボタンにロールオーバーをつける
【2015.03.24改訂】
HTMl
<form> <div class="mod_formbtn"> <ul> <li><input type="image" src="send.gif" alt="確認する" onmouseover="this.src='send_on.gif';" onmouseout="this.src='send.gif'"></li> <li><a href="JavaScript:document.fName.reset()"><img src="clear.gif"></a></li> </ul> <!--mod_formbtn_end--></div> </form>
CSS
.mod_formbtn{
width:500px;
text-align:center;
}
.mod_formbtn ul{
letter-spacing:-0.4em;
}
.mod_formbtn ul li{
letter-spacing:normal;
display:inline-block;
*display: inline;
*zoom: 1;
margin:0 15px 0 15px;
}
.mod_formbtn li a{
display:block;
background:transparent url('clear_on.gif') no-repeat top left;
}
.mod_formbtn li a:hover img{
opacity:0;
}