1

アップ/オーバー/ダウン ボタンの状態用に 3 つの png ファイルがあります。

このようなボタンをhtmlで作成するにはどうすればよいですか?

次のようなものを探しています：

<button id="myButton" upState="upstate.png" downState="downstate.png" overState="overState.png" onClick="someFunction()"/>

明らかに、それが機能する方法ではありません。しかし、それが私がそれを機能させたい方法です。そのようなボタンを作成する最も簡単で最良の方法は何ですか? フラッシュ禁止。

4

3 に答える 3

4

CSS はアクティブ状態とホバー状態をサポートしており、ボタンを離す以外のすべての状態で十分です。

#myButton {
width: 90px;
height: 20px;
background: url(defaultstate.png);
}

#myButton:hover {
background: url(overstate.png);
}

#myButton:active {
background: url(downstate.png);
}

ボタンを離す状態は必要ないかもしれません。ボタンがフォームを送信している場合、または訪問者を新しいブラウザ ページに送信している場合、ページが更新/読み込みを開始する前にボタンが離されたことに気付かない可能性があります。

于 2012-10-03T22:04:07.747 に答える
1

いくつかの方法。一般に、CSS スプライトが理想的です (つまり、3 つのグラフィック状態すべてを保持し、現在の状態に基づいてシフトする単一の画像)。あなたが持っているように見えるものを使ったより簡単なアプローチは次のようになります:

<style type="text/css">
#myButton { width: 100px; height: 30px; background: url('upstate.png'); }
#myButton:hover { background: url('overstate.png'); }
#myButton:active { background: url('downstate.png'); }
</style>

スプライト メソッドを使用してこれを行う方法を知りたい場合は、http: //css-tricks.com/css-sprites/を確認してください。

于 2012-10-03T22:07:38.713 に答える
0

上記の投稿に加えて、CSS は [hover] スタイル エクステンダーを使用して [overState] 状態のみを解決します。

jQuery に精通している場合は、次のように適切なイベント処理を設定できます。

$('#myButton').on('mousedown', function () {
  $(this).css('background','url('downstate.png')');
})

$('#myButton').on('mousedup', function () {
  $(this).css('background','url('upstate.png')');
})

$('#myButton').on('mouseover', function () {
  $(this).css('background','url('overstate.png')');
})

$('#myButton').on('click', function () {
  alert('myButton Clicked');
})
于 2012-10-03T22:22:28.470 に答える