7

画像のみで構成された単純なボタンを作成する必要があり、ユーザーがクリックすると JQuery ダイアログが開きます。

私はいくつかの読書をしており、多くの解決策に気づきました: <button>、<image>、<a>CSS を使用してボタンの背景を変更するなど...

これは紛らわしいですが、画像ボタンを実装する適切な方法は何ですか?

ありがとう。

PS:ボタン/画像はフォーカス可能である必要があります。運用可能な JSFiddle の例は大歓迎です。

4

8 に答える 8

6

ボタンを作成して配置background-imageします。フィドルをチェックしてください。 http://jsfiddle.net/siyakunde/Y38nz/

于 2013-01-08T10:38:35.047 に答える
5

多くの苦労の末、解決策を見つけました: 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!'); 
}
于 2013-01-11T08:55:45.987 に答える
3

タグの中<button>に画像を入れ、クリックイベントを添付してクリック時に<button>ダイアログを開きます。
JSFiddle

于 2013-01-11T15:10:55.523 に答える
3

あなたが所有しているように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>
于 2013-01-11T13:22:37.597 に答える
3

それは、あらゆる場合に何をしたいかによって異なります。「こうすればいい」というガイドラインはありませんが、場合によっては適している場合もあります。

たとえば、このレビューによると、IE バージョン 8 以下では、<button>タグを送信ボタンとして使用しようとすると、タグに関するいくつかのバグのある動作が発生します。

ただし、<button>HTML5 にはいくつかの新しい属性が追加されており、ここで見ることができます。その中にはautofocus、最新の主要なブラウザーのほとんどでサポートされるその他の便利なものがあります。

「フォーカス」を維持したい場合（タブのサポートがあると仮定します）、単一<image>のボタンをボタンとして使用する場合（の有無にかかわらず<a>）、適切なときに画像をフォーカス可能にするためにJSコードを追加する必要がありますタブが押されます。したがって、同じことを行うには、もう少しコードを書く必要があります。

フォームをサーバー側に送信する必要がないため、適切な解決策がもう 1 つあります。タイプを使用し、その中で属性<input type="image"を定義するsrcと、フォーカス可能になり、実行するための JS コードも難しい CSS も必要ありません。構文の詳細については、こちらをご覧ください

したがって、それらすべてのどれを使用するかを決定するのはあなた次第です。私は、より柔軟で、コーディングが簡単で、簡単に再利用でき、ターゲットブラウザーのほとんどでサポートされているものを使用します。

于 2013-01-05T16:03:15.103 に答える
2

私が知っているように、Safari ボタンの外観を変更することはできないaため、ソリューションに使用することをお勧めします。ここに私の簡単なコードがあります: http://jsfiddle.net/djgBK/1/

基礎は次のとおりです。

  1. aリンクコンテンツを左に配置する要素を取り、

  2. 次に、実際の背景である画像に置き換えます。これは、ユーザーがボタンaのみを使用して選択できる要素であるためTABです。

さらに、要素を使用するaとtitle、ボタンにカーソルを合わせたり入力したりした後に表示されるものを配置できます。

于 2013-01-11T08:53:04.090 に答える