« (*゚▽゚)ノ 苦手な顔文字克服作戦 | トップページ | YAKKAY(ヤッカイ) 自転車用ヘルメット »

2012.03.06

SELECT~OPTIONにIMG表示

Firefoxでは意図した通りに動いていますが、他は微妙。IEでは選択肢に画像が表示されません。Chromeでは画像は一切表示されません。

実は今まで知らなかったのですが、HTMLでは、素のままでは画像を選択する選択肢って作れないのですね。OPTION要素の中にIMGを置いてもまったく表示されないようで。これってどうしてできなくしてあるんだろ?セキュリティ的にも問題なさそうなんだけど。。。

対処法は、javascriptを使う必要がありますけれど、割と単純。

こんな感じ↓

各選択肢をあらわすOPTION要素それぞれに背景画像を使えばよろしい(スタイルの指定でコチョコチョしますが)。

単一選択のドロップダウンリストの形式では、ドロップダウンが閉じた後は選択画像が表示されませんから、(SELECT要素の)onchangeで、選択されたOPTIONの背景画像をSELECT要素へ設定してやります。(複数選択の場合はSELECTの背景は不要みたい)

コードはコチラ↓例によってjQuery必要です。

<style type="text/css">
#imgSelect, #imgSelect option {
	background-repeat:no-repeat;
	height:32px;
	padding-left:32px;
}
</style>
<select id="imgSelect">
<option style="background-image:none;">画像を選択してください</option>
<option style="background-image:url(blue-dot.png);">青ドット</option>
<option style="background-image:url(red-dot.png);">赤ドット</option>
<option></option>
</select>
<script type="text/javascript">
jQuery(function($) {
	$('#imgSelect').change(function(){
		var opt = $('#imgSelect option:selected');
		var url = opt.css('background-image');
		$('#imgSelect').css('background-image',url);
	});
});
</script>

問題は、選択肢の画像を小さく出来ない点かな。

----
WEB+DB PRESS Vol.97
WEB+DB PRESS Vol.97
posted with amazlet at 17.02.17
外村 和仁 小林 徹 古川 陽介 佐藤 歩 yoku0825 是澤 太志 一野瀬 翔吾 加藤 颯史 のざき ひろふみ うらがみ 水嶋 淳貴 久田 真寛 久保 達彦 伊藤 直也 遠藤 雅伸 ひげぽん 海野 弘成 はまちや2 竹原 倉岡 洋義
技術評論社
売り上げランキング: 1,775

« (*゚▽゚)ノ 苦手な顔文字克服作戦 | トップページ | YAKKAY(ヤッカイ) 自転車用ヘルメット »

プログラミング」カテゴリの記事

javascript / jQuery」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: SELECT~OPTIONにIMG表示:

« (*゚▽゚)ノ 苦手な顔文字克服作戦 | トップページ | YAKKAY(ヤッカイ) 自転車用ヘルメット »

2019年8月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
フォト

Google AdSense

銀の弾丸

無料ブログはココログ

他のアカウント