code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像を送信ボタンに

画像を送信ボタンに適用するあれこれ。

対象となる画像は↓。横143px, 縦50pxで適当にペイントで作成。はっきりさせるため黒背景の上に置いている。背景白、枠線なしの画像。

JavaScriptを使わずに画像を送信ボタンにするには次の方法が思いつく。もっとあるかもしれないけど、今回試したケース。

  • buttonタグに背景画像として指定
  • input type="submit"に背景画像として指定
  • input type="image"で指定
  • buttonタグ内にimgタグ

実験。使用したCSSは↓。面倒なんで全部!importantつけてます。

<style type="text/css">

/* ボタンの背景画像に画像 */
#sample114 .bkimg {
  background-image: url('http://blog-imgs-49.fc2.com/f/r/m/frmmpgit/button.png') !important;
}

/* IE8, IE9のみ、ボタンが押されている間のスタイル
 * IE7以下では:active疑似クラスの振る舞いが違うみたい */
#sample114 .bkimg:active {
  opacity: .50 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; 
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50) !important;
  margin-top: 1px !important;
  margin-left: 1px !important;
}

/* jQueryでセットされるマウスがホバーした時のスタイル */
#sample114 .op85 {
  opacity: .85 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)" !important; 
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85) !important; 
}

/* jQueryでセットされるマウスが押された(mousedown)時のスタイル
 * "↓の1.2.3.にボタンを押した感じをつける"のリンクをクリックした後に使われる */
#sample114 .op50i{
  opacity: .50 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; 
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50) !important;
  margin-top: 1px !important;
  margin-left: 1px !important;
}

/* input, buttonタグは背景赤にして、幅とか(padding/margin/border)をゼロに
 * 丸みをつける 
 * カーソルを指に */
#sample114 input, #sample114 button {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background-color: red !important;
  cursor: pointer !important;
  border-radius: 2px !important;
}

/* :hover擬似クラスによるホバーの実演。IE6だと動かない。 */
#sample114 input:hover, #sample114 button:hover {
  border-top: 1px solid yellow !important;
  border-left: 1px solid yellow !important;
}

/* imgタグの幅とか(padding/margin/border)をゼロに
 * 丸みをつける 
 * カーソルを指に */
#sample114 button img {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  cursor: pointer !important;
  border-radius: 2px !important;
}

/* サイズを明示指定 */
#sample114 .sized {
  width: 143px !important;
  height: 50px !important;
}

/* Firefoxでbutton内imgタグの位置がずれるアドホックな対応 */
#sample114 .fixff{
  margin-left: -3px !important;
  margin-top: -1px !important;
}

/* 各ボタンの上にあるタイトル用のマージン */
#sample114 .title {
  margin-top: 10px !important;
}

</style>

これに対して次のようなHTMLを作成。

<script type="text/javascript">
$(function(){
  // デモ用なのでsubmitを一律無効に
  $('#sample114').submit(function(){
    return false;
  });

  // ボタンにはホバースタイルを割り当てる
  $('input, button').hover(function(){
    $(this).toggleClass('op85');
  })

  // リンクが押されたらイベントを登録
  $('#add_events').click(function(){

    // マウスの押す、離すのイベント
    $('.bkimg, input[type="image"]').mousedown(function(){
      $(this).toggleClass('op50i');
    }).mouseup(function(){
      $(this).toggleClass('op50i');
    });

    $(this).fadeOut('slow');
    return false;
  });

});
</script>

<form id="sample114"><div style="padding: 12px; color: white; border: 1px solid silver; background-color: black;">

<p><a href="#" id="add_events">↓の1.2.3.にボタンを押した感じをつける</a></p>

<div class="title">1. buttonタグに背景画像</div>
<div><button class="bkimg sized"></button></div>

<div class="title">2. inputタグに背景画像</div>
<div><input type="submit" class="bkimg sized" value="" /></div>

<div class="title">3. input type=image</div>
<div><input type="image" src="http://blog-imgs-49.fc2.com/f/r/m/frmmpgit/button.png" /></div>

<div class="title">4. buttonタグにimgタグ(buttonにサイズ指定なし)</div>
<div><button><img src="http://blog-imgs-49.fc2.com/f/r/m/frmmpgit/button.png" width="143" height="50" /></button></div>

<div class="title">5. buttonタグにimgタグ(buttonにサイズ指定あり)</div>
<div><button class="sized"><img src="http://blog-imgs-49.fc2.com/f/r/m/frmmpgit/button.png" width="143" height="50" /></button></div>

<div class="title">6. buttonタグにimgタグ(buttonにサイズ指定あり) * Firefox用</div>
<div><button class="sized"><img src="http://blog-imgs-49.fc2.com/f/r/m/frmmpgit/button.png" class="fixff" width="143" height="50" /></button></div>

</div></form>

これを表示させると・・・・。

↓の1.2.3.にボタンを押した感じをつける

1. buttonタグに背景画像
2. inputタグに背景画像
3. input type=image
4. buttonタグにimgタグ(buttonにサイズ指定なし)
5. buttonタグにimgタグ(buttonにサイズ指定あり)
6. buttonタグにimgタグ(buttonにサイズ指定あり) * Firefox用

結論

1ピクセルのずれも許さない画像ボタンを作りたい場合、IE6-9とFirefox, Chrome, Safari(iPhoneのみ確認)の範囲においてはbuttonタグまたはinputタグに背景画像として画像を設定する方法でよさそう。それ以外では表示上、機能上の問題があった。

その前提事項。

  • ユーザビリティを損ないたくないため、テキストボックスでエンターキーを押したら送信するようにする = JavaScriptでブラウザのsubmit仕様を完全にエミュレート実装できるかよく分からない
  • ボタンは画像を指定する = 超政治的理由
  • disabled属性をjQueryで切り替える = 多重送信防止用とユーザーに未入力の項目があって送信できないことを(スタイルも併用してだが)アピールするため

CSSについて簡単に説明すると、button, input, imgタグ、全てにborder: 0; padding: 0; margin: ;を指定している。これでネストさせても隙間なく配置される事を期待している。

またbuttonにimgをネストさせる場合、imgだけにサイズを指定しただけではbuttonとの間にpaddingを無視して隙間ができるブラウザがあるのでbuttonにもサイズを指定したバージョンを別に作成している(5番目)。

それでもFirefoxにはズレが出るのでマイナスのmarginを指定したバージョンを別に作成している(6番目)。

input type="image"
IE限定っぽいけど。input type="image"ではdisabled属性をオン・オフするとエンターキーで送信ができなくなるばかりかbeep音が発生するので使わない。同様の症状の記事。またIE9だとborder-radiusが効かない(input type="submit"とbuttonは効く=丸みが出る)。クリックされた位置が座標で送信されるので必要な場合はinput type="image"を使うが、その際はIEのビープ音対策をする(keydownイベントで13があったら無視する、とか)
buttonの中にimgタグをネストさせる
最初これがいけるかな、と思ったけどIE7とFirefoxでレイアウトが崩れた。赤がボタンの背景なので、buttonのpaddingあたりが消えてない模様。
Firefox。どうハックするかは別としてmarginにマイナスを指定すればオフセットを修正できる。

お次はIE7。marginにマイナスを指定しても上の1ピクセルの赤い線が消えなかった。試してないがposition: absolute;のような技を使えばいけるのかも。

左がボタンに画像がサイズぴったりに収まった状態。右がIE7、1px下にずれてるー。

button, input type="submit"を押した感じ
これまたIE限定っぽい。画像ボタンはFirefox, Chromeでは押した感じ(マウス押下でボタンが凹む感じ)はそもそも出ないが、IEだと押した感じが分かる。背景を画像にしておくとボタンフェイスに画像がないためか、押された感じが出ない。これに近づけるにはJavaScriptを使う(IE6-IE9)か:active疑似クラス(IE8-IE9)を使うとそれっぽくなった。

画像を送信ボタンにする際は、buttonタグに背景画像をメインで使っていこう。

関連記事
タグ:IE6 IE7 CSS
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。