SQLの窓

2011年12月02日


HTML : 画像を使ったボタンのバリエーション

ボタンに画像を使うには、3通り方法があります


1) BUTTON 要素 を使う
2) INPUT 要素の type="button" を使う
3) INPUT 要素の type="image" を使う

ポイント1

1) と 3) は、FORM 要素内で記述するとサーバーに送るボタンとして使用できます
2) は、FORM 要素内で記述されてもサーバーへは送られません

ポイント2

1) と 2) は、画像の定義方法が同じで、どちらもボタンとしての効果があります
3) は画像が表示されるだけですが、その他の画像に対するスタイルを定義できます
( サーバーへ送る時にクリックした座標が送られます )
3) の場合は、カーソルはポインタカーソルになりますが、ボタンでは矢印です

ポイント3

ボタンにテキストを指定する場合は、INPUT要素より BUTTON 要素のほうが容易です




以下の二つのボタンは、BUTTON 要素と INPUT 要素です
( ボタン画像よりエリアとして縦横 5px 大きく設定しています )





ボタン画像は、輪郭が表現されている場合が多いので、5px 大きく設定しますが、
以下は、ブラウザが自動的に付加する輪郭を省く場合の記述方法で、開始位置
を -1px として、縦横を -2px します。元の画像から考えると +3px です
( これは、IE8 でしかうまくいかないので使わないほうがいいです )



さらに、ボタン画像に含まれる輪郭を消去して使うには、開始位置をさらに
マイナスにして、サイズを調整します。この場合は、開始位置が -2px で、
画像の元のサイズからすると +1px です
( これがたぶん全てのブラウザでうまくいきそうです )





上はボタン画像では無く一般の画像です。これをボタンとするには、テキストの
色もさらに設定する必要があります

以下の3つは開始位置とサイズを変化させたバリエーションですが、通常画像の為、
大きな違いはありません。逆に画像にタイル画像を使うと繰り返して表示されるの
で小さな画像で背景パターンを使う事もできます

※ 少なくとも IE8 と その他のブラウザと仕様が違います。普通の画像の場合は、
幅を +5px ではなく、+4px が正解のようです







以下は、INPUT 要素の type="image" を使用しています。この場合はボタンと言うより、
「画像を使って(クリックした位置も)サーバーにデータを送信する」為に使います。
ですから、自動的にボタンとしての効果も無いので、クリックできる事を明示する為に
カーソルがポインタカーソルに変化するようになっています




<pre>
<img src="http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png" onclick='alert("通常のボタン用画像です")' />

<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png);width:185px;height:35px;' onclick='alert("button要素 : ボタンサイズより縦横共に5px大きい設定で、画像全体とボタン効果を表現できます")' >実行</button>

<input type="button" style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png);width:185px;height:35px;' onclick='alert("input要素 : ボタンサイズより縦横共に5px大きい設定で、画像全体とボタン効果を表現できます")' value="実行" />

<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png) -1px -1px;width:183px;height:33px; ' onclick='alert("ボタンサイズより縦横共に3px大きい設定で、画像全体と一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-1px)をスタイルで設定する必要があります")'>実行</button>

<button style='background:url(http://lh4.googleusercontent.com/-t05nNNNYcUM/TthO_-NseNI/AAAAAAAAD3o/LkyqQjJKxPQ/s180/_img.png) -2px -2px;width:181px;height:31px;' onclick='alert("ボタンサイズより縦横共に1px大きい設定で、画像の輪郭を1pxづつ省いて全一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-2px)をスタイルで設定する必要があります")'>実行</button>

<img src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" onclick='alert("一般画像をボタン用として利用します")' />

<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png);width:210px;height:59px;color:#ffffff' onclick='alert("ボタンサイズより縦横共に3px大きい設定で、画像全体と一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-1px)をスタイルで設定する必要があります")'>実行</button>

<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png) -1px -1px;width:209px;height:57px;color:#ffffff'>実行</button>

<button onclick='alert("OK")' style='background:url(http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png) -2px -2px;width:207px;height:55px;color:#ffffff' onclick='alert("ボタンサイズより縦横共に1px大きい設定で、画像の輪郭を1pxづつ省いて全一番外側のボタン効果を削除して表現できます。\n但し、開始位置(-2px)をスタイルで設定する必要があります")'>実行</button>

<input type="image" src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" onclick='alert("input 要素で画像をボタンとして利用します\nこの方法では、テキストを利用できませんが、クリックした位置をサーバーに送る事ができます\nまた、ボタンが押された時の効果は利用できません")' />

<input type="image" src="http://lh6.googleusercontent.com/-2nPp58ASA_s/TthPaa4UaoI/AAAAAAAAD3w/N52ooMu6Epo/s206/_img.png" style='border:solid 2px #c0c0c0' onclick='alert("input 要素で画像をボタンとして利用します\n普通の画像と同じようにスタイルで見え方を変更できます\nここでは、輪郭に実線を使って太さと色指定をしています")' />
</pre>
BUTTON 要素の中に IMG 要素とテキストを記述すると以下のようにもできます

背景用のタイル画像でボタンを表現します

▼ 元画像





【HTML / CSSの最新記事】
posted by lightbox at 2011-12-02 14:06 | HTML / CSS | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり