マウスオーバーすると、次のようになります
<input type="image" src="1.jpg" />
onmouseout のときは、次のようになります。
<input type="image" src="2.jpg" />
を保持し、<input type=reset>
Javascriptを使用して非表示にし、<a>
要素を作成してスタイルを設定し、イベントハンドラーをアンカーにアタッチしclick
てリセットをトリガーし、:hover
アンカーでCSSを使用して背景画像を変更します。Javascriptを使用していないユーザーには、通常のoleのリセットボタンが表示されます。
あなたが何をしようとしているのか正確にはわかりませんが、Tordekのように、CSSと:hoverを使用することをお勧めします
CSSは次のとおりです。
.myButton{
background:url("2.jpg") no-repeat;
width: 200px;
height: 100px;
border: none;
}
.myButton:hover {
background:url("1.jpg") no-repeat;
width: 200px;
height: 100px;
border: none;
}
そしてここにHTMLがあります:
<input type="submit" class="myButton" value="">
これは、エンドユーザーがの特定の場所を指すことができる<input type="image">
ある種のマップを提示することを目的としています。
しかし、あなたはそれをしたくありません。背景画像のあるボタンが必要です。したがって、に設定されて<input type="reset">
いるCSSで置き換えることをお勧めします。次に、マウスオーバーとマウスアウトのCSSクラスを変更するJavascript(jQueryかもしれませんか?ホバー関数があります)を追加できます。例えば:background-image
url(path/to/your/image.png)
$("#buttonid").hover(
function () {
$(this).addClass('hover');
},
function () {
$(this).removeClass('hover');
}
);
CSSを使用
#buttonid {
background: url(path/to/your/image.png);
}
#buttonid.hover {
background-position: 20px; /* Make use of CSS sprites. */
}
(CSSスプライトの詳細はこちら)
これにCSS疑似クラスを使用することを提案する人もいますが、それは。:hover
以外の要素のすべてのブラウザーで機能するわけではありません<a>
。
リセット ボタン自体の表示を変更する必要はありません。非表示にします。href のハッシュを含むリンクで表される独自のリセット ボタンを作成し、クリックすると残りのボタンが呼び出されるようにします。
<a href="#" class="resetPush">
<span>Reset</span>
</a>
次の JavaScript と組み合わせると、次のようになります。
$("input[type='reset']").hide();
$("a.resetPush").click(function(e){
e.preventDefault();
$("input[type='reset']").trigger("click");
});
リンクのロールオーバー効果については、css で処理できます。
a.resetPush span { display:none; }
a.resetPush { display:block; width:100px; height:25px;
background: url("slider.jpg") left top no-repeat; }
a.resetPush:hover{ background-position: left bottom; }
の適切なルールを CSS に追加します:hover
。どの要素でもホバーをサポートしていないIE以外のすべてで動作するはずです。