ブラウザのボタンあれこれ(HTML/jQuery)

button要素を使うと、input要素と同等の機能を持つボタンが作成できる。type=”button” で汎用ボタンになる。

imgタグを使うと画像ボタンが作れる。

<button type="button"><img src="b_play.png"></button>

をブラウザで開くと以下になる。

button { background-color:transparent;border-style:none;}

ボタンの背景色を透明に、枠線をなしにすると、

のようなボタンが作成できる。

<button type="button" title="tooltip content"><img src="b_play.png"></button>

ボタンに限らず、title属性を設定することで、ツールチップを設定することができる。

<button type="button" id="btnPlay"><img src="b_play.png"></button>

のようにIDをつけてjQueryで

$('#btnPlay').live('click',function(){
    alert('play');
});

のようにすればOK。

HTMLで指定する場合は disabled属性を使う。(画像が指定されていない)通常のボタンであれば、見た目も変化して押せないことがわかるようになる。 (ただしchromeでは画像ボタンを使う際に注意が必要。)

<button type="button" id="btnPlay" disabled><img src="b_play.png"></button>