- 締切済み
プルダウンの選択リストの中に画像を埋め込む（表示する）ことはできますでしょうか
タイトルのとおりなのですが、 プルダウンのリストは通常、テキストのリストから選択するものですが、 プルダウンの選択リストの中に画像を表示させることはできますでしょうか。 プルダウンフォームのoptionタグやCSSの背景に画像を指定したりしたのですが 表示することはできませんでした。 どなたか実現方法をご存知でしたら教えていただけないでしょうか。 よろしくお願いします！
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
通常の機能ではできないと思われます。 スクリプトで似たようなものを作れば、できないことは無いけれど・・・ できないこともないというサンプルとして、適当に作成してみました。 どう使うのか不明なこともあって、かなりいい加減です。 （HTMLのA.jpgなどに適当な画像を入れる） 画像をクリックするとどうするのかわからないので、とりあえずその画像のaltの文字がセレクタに表示されるようになっている。 セレクタ本来の機能がそのまま残っているけど、不要なのでdisableにするか、ここもdivや画像などに変えてしまうのがよいかも。 <html> <head> <style type="text/css"> .imgSelect, .imgSelect select { width:150px; } .imgSelect #imgs { position:absolute; overflow:hidden; } .imgSelect #imgs div { position:absolute; } </style> <script type="text/javascript"> var tID, th, tmph, img, flg, spd = 10, w = 150, h = 40; window.onload = function(){ img = document.getElementById('imgs'); var e = img.getElementsByTagName('IMG'); for (var i=0; i<e.length; i++) { var m = e[i]; m.onmouseover = function(){imgOver(this,1)}; m.onmouseout = function(){imgOver(this,0)}; m.onclick = function(){imgClick(this)}; m = m.style; m.width = w; m.height = h; } var m = img.style; th = h*e.length; m.width = w; m.height = 0; tmph = 0; } function over(f) { flg = f; if (f) { if (!tmph) tID =setTimeout(slide, spd); } else { setTimeout(clear, 200); } } function slide(){ var o = document.getElementById('imgs'); os = o.getElementsByTagName('DIV')[0].style; if (tmph<th) { tmph += 5; o.style.height = tmph; os.top = tmph-th; tID = setTimeout(slide, spd); } else { os.top = 0; clearTimeout(tID); } } function clear(){ if (!flg) { img.style.height = 0; tmph = 0; if (tID) clearTimeout(tID); }} function imgOver(e,f){ var elm = img.getElementsByTagName('IMG'); for (var i=0; i<elm.length; i++) elm[i].style.border = 0; if (f) e.style.border = '2px solid blue'; } function imgClick(e){ document.getElementById('sel').options[0].text = e.alt; } </script> </head> <body> <div class="imgSelect" onmouseover="over(1)" onmouseout="over(0)"> <select id="sel"> <option value=0 selected></option> </select><br> <div id="imgs"><div> <img src="A.jpg" alt="AAA"><br> <img src="B.jpg" alt="BBB"><br> <img src="C.jpg" alt="CCC"><br> </div></div> </div> </body> </html>
背景色は指定可能ですが、画像は無理でしょう。 optionやselectに適応させても何も変化しません。
