input type="submit" でボタンに画像を使う方法

Read More

submitボタンに画像を利用したいっていう時がある。


そんな時input type="image"でもいいのだけど、これだと位置情報を送ったりするし、
既に稼働しているサイトだとブラウザによっては想定しているのと違う挙動をしたりすることがあったりする。

一応onclick="document.forms[0].submit();"を使ったり、
form要素にonsubmit="return false;"ってやれば色々な挙動をある程度制限できるけど、
何かのタイミングで修正が必要になった場合、確認すべき場所があちこちに分散してしまう。

これではあとで触る人への罠みたいになってよくない。


ってことでtype="submit"のままボタンを画像にする。
※IE6、IE7、IE8、Firefox、Chromeで動作確認済み。

■submitボタンに画像を利用する
<input type="submit" name="btn_submit" value="" style="background:url('images/btn_submit.png');width:145px;height:28px;border:0px solid;cursor:pointer;" />



注意点としては、
submitボタンに当て込む画像は、予め任意の大きさのものを用意しておくということ。
画像のサイズを後からCSSで変更することはできない。
そして画像と同じ大きさのwidthとheightを別途指定してやる必要があるという点。


上記の例ではstyle属性に直接書き込んでいるが、
もちろんこれは外部CSSで定義してもよい。

ただし、マウスオーバ時の画像切替はhoverでやらないほうがよい。

これはIE6がinput要素でhoverを利用することをサポートしてないから。

なのでマウスオーバの画像切替はjavascriptを使った書き方が個人的には好ましい。


少し長くなるがマウスオーバで画像を切り換えるのを先述した例にプラスするとこうなる。


■マウスオーバで画像の切替
<input type="submit" name="btn_submit" value="" style="background:url('images/btn_submit.png');width:145px;height:28px;border:0px solid;cursor:pointer;" onmouseover="this.style.background='url(images/btn_submit_on.png)';" onmouseout="this.style.background='url(images/btn_submit.png)';" />



人によってはjavascriptとの併用になるため若干抵抗があるかも知れないが、
いまどきjavascriptを使わないサイトもないだろう。
気にせず使って欲しい。




まあそもそも個人的にはsubmitボタンや入力フォームの部品ってのはデフォルト(ブラウザ依存)のままの方が良いと思う。

そんな所に時間かけてわかりにくくするくらいならもっと別の部分で時間を使いたいものだ。


Comments(6)

1  ミヤビ  2012/09/07 (金) 23:20 ID:XXXXXXXXX
バージョン別 ブラウザシェアグラフ
http://lhsp.s206.xrea.com/misc/browser-share-version.html

ついにIE6がOther枠に追い出されましたね!
まぁ「IE6に対応しろと言ったんだから対応しろ」と言われて終わりそうですが

下手に外部CSSやjQuery使わずに、ベタで書くほうが楽そうですね。
画像の縦横の幅が動的に分かるPHPで処理すれば動的に出力出来るので。

2  シラサヤ  2012/09/11 (火) 10:48 ID:XXXXXXXXX
IE6への対応はもういい加減やらんでいいと思うんだけどねえ。
IE6のユーザがさ、新規案件のサイトを探し出したり利用したりするとはどうしても思えないんだよね。

まあ金(時間)かけさせてくれるなら全然やるけど。

3  じーじ  2016/08/31 (水) 23:39 ID:prje7II15
firefoxでtype=imageがどうにもpostできなかったんですが、submitに画像のスクリプトでうまくいきました!古いmacでやってるのが原因だったかも?いずれにしても助かりました。ありがとうです!

4  シラサヤ  2016/09/01 (木) 14:09 ID:8bFvl7E15
どういたしまして

しかしFirefoxでtype=imageがPostできないとは…
古いMac環境だということですが私ならまずソースコードの記述ミス(例えば締めタグ忘れとか全角スペースとか)を疑います

新しいまっさらなファイルにformとinputボタンのみを記述して改めて動作検証してみてはいかがでしょうか

5  マーライオン  2016/09/07 (水) 15:56 ID:bR9hDjH15
とても分かりやすく、参考に名せていただきました。

ちなみに、当て込む画像は、やはりあらかじめ任意の大きさのものを用意するしかないのでしょうか。
指定したwidthとheightに自動で拡縮するようにはできませんでしょうか。

6  シラサヤ  2016/09/15 (木) 19:05 ID:wFtDs9315
>> マーライオン
一行で完結させたかったのでその記述になっているわけで。

細かい仕事をさせるつもりなら当然cssもjsも別ファイルを用意してそちらに書いた方が良いと思いますよ。
今の流行りから考えても直書き自体あまり褒められたものではありませんし。


heightとwidthを指定したくないということでしたので、
その場合はjavascriptで画像の大きさを動的に取得してやって、
heightとwidthに当て込んでやればよいと思います。
「javascript 画像 大きさ 取得」などでググれば山ほどHITすると思います。



Category "HTML・JS・CSS" の最新記事