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
posted with amazlet at 17.02.17
外村 和仁 小林 徹 古川 陽介 佐藤 歩 yoku0825 是澤 太志 一野瀬 翔吾 加藤 颯史 のざき ひろふみ うらがみ 水嶋 淳貴 久田 真寛 久保 達彦 伊藤 直也 遠藤 雅伸 ひげぽん 海野 弘成 はまちや2 竹原 倉岡 洋義
技術評論社
売り上げランキング: 1,775
技術評論社
売り上げランキング: 1,775
« (*゚▽゚)ノ 苦手な顔文字克服作戦 | トップページ | YAKKAY(ヤッカイ) 自転車用ヘルメット »
「プログラミング」カテゴリの記事
- 自分で書いたコードが大好き(2020.09.20)
- NPMのヨロコビ(2020.05.14)
- VanilaJS は必須科目(2019.02.25)
- MZ-700フルJavaScriptエミュレータ v1.0.6 をリリース(2019.01.26)
- 戦々恐々GitHub vs BitBucket(2019.01.08)
「javascript / jQuery」カテゴリの記事
- [javascript] Google Maps API V3 で標高カラーマップを表示(2012.09.27)
- 体重落として秋の夜長はプログラミング(2012.09.09)
- [jQuery] jQueryで簡単に作るスクロールバーコントロール(2012.09.07)
- [javascript+jQuery] イベントハンドラーの一括自動設定(2012.06.26)
- SELECT~OPTIONにIMG表示(2012.03.06)
コメント