CodingMania

CodingMania

2011/4/3

javascriptでinput画像ボタンにロールオーバーをつける

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改訂】

デモページへopen_in_new

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;
}

© CodingMania.net