画像のみで構成された単純なボタンを作成する必要があり、ユーザーがクリックすると JQuery ダイアログが開きます。
私はいくつかの読書をしており、多くの解決策に気づきました: <button>
、<image>
、<a>
CSS を使用してボタンの背景を変更するなど...
これは紛らわしいですが、画像ボタンを実装する適切な方法は何ですか?
ありがとう。
PS:ボタン/画像はフォーカス可能である必要があります。運用可能な JSFiddle の例は大歓迎です。
画像のみで構成された単純なボタンを作成する必要があり、ユーザーがクリックすると JQuery ダイアログが開きます。
私はいくつかの読書をしており、多くの解決策に気づきました: <button>
、<image>
、<a>
CSS を使用してボタンの背景を変更するなど...
これは紛らわしいですが、画像ボタンを実装する適切な方法は何ですか?
ありがとう。
PS:ボタン/画像はフォーカス可能である必要があります。運用可能な JSFiddle の例は大歓迎です。
ボタンを作成して配置background-image
します。フィドルをチェックしてください。
http://jsfiddle.net/siyakunde/Y38nz/
多くの苦労の末、解決策を見つけました: http://jsfiddle.net/YRY8M/3/。
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
そしていくつかのJavaScript:
function doSomething() {
alert('Hello!');
}
タグの中<button>
に画像を入れ、クリックイベントを添付してクリック時に<button>
ダイアログを開きます。
JSFiddle
あなたが所有しているようにjQueryを使用してください...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#theBtn{
margin: 20% auto 0;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="theBtn"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#theBtn").click(function(){
if(confirm('Are you sure?')){
$("#theBtn").fadeOut('slow');
}
});
});
</script>
</body>
</html>
それは、あらゆる場合に何をしたいかによって異なります。「こうすればいい」というガイドラインはありませんが、場合によっては適している場合もあります。
たとえば、このレビューによると、IE バージョン 8 以下では、<button>
タグを送信ボタンとして使用しようとすると、タグに関するいくつかのバグのある動作が発生します。
ただし、<button>
HTML5 にはいくつかの新しい属性が追加されており、ここで見ることができます。その中にはautofocus
、最新の主要なブラウザーのほとんどでサポートされるその他の便利なものがあります。
「フォーカス」を維持したい場合(タブのサポートがあると仮定します)、単一<image>
のボタンをボタンとして使用する場合(の有無にかかわらず<a>
)、適切なときに画像をフォーカス可能にするためにJSコードを追加する必要がありますタブが押されます。したがって、同じことを行うには、もう少しコードを書く必要があります。
フォームをサーバー側に送信する必要がないため、適切な解決策がもう 1 つあります。タイプを使用し、その中で属性<input type="image"
を定義するsrc
と、フォーカス可能になり、実行するための JS コードも難しい CSS も必要ありません。構文の詳細については、こちらをご覧ください
したがって、それらすべてのどれを使用するかを決定するのはあなた次第です。私は、より柔軟で、コーディングが簡単で、簡単に再利用でき、ターゲットブラウザーのほとんどでサポートされているものを使用します。
私が知っているように、Safari ボタンの外観を変更することはできないa
ため、ソリューションに使用することをお勧めします。ここに私の簡単なコードがあります: http://jsfiddle.net/djgBK/1/
基礎は次のとおりです。
a
リンクコンテンツを左に配置する要素を取り、
次に、実際の背景である画像に置き換えます。これは、ユーザーがボタンa
のみを使用して選択できる要素であるためTAB
です。
さらに、要素を使用するa
とtitle
、ボタンにカーソルを合わせたり入力したりした後に表示されるものを配置できます。