- 締切済み
プルダウンの選択リストの中に画像を埋め込む（表示する）ことはできますでしょうか
- みんなの回答 （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に適応させても何も変化しません。
関連するQ&A
- プルダウンリストの背景色の指定
お世話になります。 現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。 <select> <option style="background-color: #FF0000;">サンプル1</option> <option style="background-color: #00FF00;">サンプル2</option> <option style="background-color: #0000FF;">サンプル3</option> <option style="background-color: #FFFFFF;">サンプル4</option> </select> このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、 上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。 IEとおなじ動きになるようにするには、どうしたらよいでしょうか。 ちなみに、 <select style="background-color: #FF0000"> にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。 と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。 簡単に解決できる方法などございますでしょうか。 もしくは、javascriptで解決できますでしょうか。 どうぞ宜しくお願いいたします。
- ベストアンサー
- HTML
- プルダウンリストの内容をプルダウンリストに返すには
親画面に空のプルダウンリストを用意してあります。 子画面にて、プルダウンリストから複数選択し、ボタンを押すなどして、 親画面のプルダウンリストに選択したものだけを表示するように したいと思っています。 ●親画面 （空） （空） （空） （空） ○子画面 あああ (check) いいい ううう (check) ［OKボタン］ ↓ ●親画面 あああ いいい となるように、JavaScriptで実現できますでしょうか？ JavaScriptに長けてる方いらっしゃいましたら、 よろしくお願いいたします。
- 締切済み
- JavaScript
- プルダウンのoptionの表示・非表示はできますか？
JavaScriptを使ってプルダウン操作をしております。 一つ目のプルダウンで選択したあと2つ目のプルダウンのoptionの部分だけ表示・非表示をしたいのです。そんなことはできるのでしょうか？ 下のソースで説明しますが、一つ目のリストで「あいうえお」を選択した時点で2つ目の選択リストの「ひらがな1」と「ひらがな2」だけを選択できるようにしたいのです。「カタカナ1」「カタカナ2」は非表示もしくは選択不可にできればいいのですが。 一つ目のプルダウンリスト <select name="formtype" onchange="form_indicate();"> <option value="AAA">あいうえお <option value="BBB">アイウエオ </select> 二つ目のプルダウンリスト <select name="formtype2"> <option value="aaa">ひらがな1 <option value="bbb">ひらがな2 <option value="ccc">カタカナ1 <option value="ddd">カタカナ2 </select>
- 締切済み
- JavaScript
- プルダウンリストとテキストエリアの連動
どう調べてもわからないので教えてください。 HTML上で動作するツールを作成しています。 最終的に、あるテンプレートをテキストエリアに表示させたいと考えています。 そのために、項目をいくつかプルダウンで選択し進んでいくというものです。 プルダウンリストは、選択したリストにより連動し、選択肢が変わるように したいのです。 項目別にプルダウンは5つ、5つ目はない場合もあります。 【手順】 (1)プルダウン（１）選択 ↓ (2)プルダウン（2）選択 ↓ (3)プルダウン（3）選択 ↓ (4)プルダウン（4）選択 ↓ (5)プルダウン（5）選択 ←選択肢がない場合あり ↓ テキストエリアに該当の文言が表示 ちょっと複雑なのですが、よろしくお願いいたします。
- 締切済み
- HTML
- 入力フォームとプルダウンメニューに関して
入力フォームとプルダウンメニューを重ねて表示し、入力フォームを上部に表示したいのですが、自分で試してみるとプルダウンメニューが入力フォームの上部に表示されてしまいます。 入力フォームを上部に表示したいのですが、 やり方がわかりません。教えて下さい。 よろしくお願いします。 <html> <head> <title></title> //CSSの定義 <style type="text/css"> <!-- span{ position:relative; left:70px; } --> </style> </head> <body> <span> //入力フォーム <input type="text" name="input" size="10" maxlength="1"> </span> //プルダウンメニュー <select> <option></option> <option>あああ</option> <option>いいい</option> <option>ううう</option> <option>えええ</option> <option>おおお</option> </select> </body> </html>
- 締切済み
- HTML
- リストボックス内で画像の表示
宜しくお願いします。 現在リストボックスのフォームを制作しています。 そこで、どうしても上手くいかないので教えて頂きたいのですが、並んだテキストの前にインデントのように「画像」をそれぞれ表示させる事は不可能なのでしょうか？背景画像の表示ならわかるのですが…。 ＜例＞ △△△△△△△△△△△（一つ目） ○○○○○○（二つ目） △△△△△△△△△（三つ目） ○○○○○○○○○○（四つ目） ↑これを ■（←画像）△△△△△△△△△△△（一つ目） ■○○○○○○（二つ目） ■△△△△△△△△△（三つ目） ■○○○○○○○○○○（四つ目） ↑このように表示させたいのです。どなたかご教授ください。 ちなみにこれが駄目なら「フローティング フレーム」を考えたのですが、これですと、ネスケが効かず問題外なのです…。もし、フォームでは不可能だとしましたら、他に何かいい方法がありましたらお教えください。 宜しくお願い致します。
- 締切済み
- JavaScript
- SELECTのプルダウンの長さの調整
困っております。。ご存じの方ぜひ教えて頂けたらと思います。 HTMLのSELECTタグでプルダウンを作成しています。 OPTIONで指定しているリストは１００件ほどあります。 この状態で▼を押してリストを表示すると、 縦が長すぎで、画面の外に飛び出る場合があります。 こうなると、スクロールバーもつまむことができないので 目的のものが選択できないことがあります。 プルダウンの表示長さを調節することはできませんでしょうか？ なお、SELECT以外の代替え案は勝手ながらご遠慮願います。 よろしくお願いしますm(_ _)m
- ベストアンサー
- HTML
- Access▼を押したらリストが出て選択
Accessフォームにおいて、なんていうのかわかりませんが（「リスト表示」？「プルダウンメニュー」？）▼を押したらリストが出てクリックで選択して入力する項目を作りたいのですが。
- ベストアンサー
- オフィス系ソフト
- hタグの右横に画像を表示
hタグ（今回は<h3>タグ）の右横に、「new」の画像を表示したいと思っています。 <h3>タグは1ページの中に複数出てきて、それぞれ文字数も異なります。 全てに「new」がつく訳ではなく、任意のものだけに表示です。 css の background image で試してみたのですが 当然のことながら、left か right かの指定なので、どちらかに極端に寄ってしまいます。 right 指定で％で指定していけば、なんとなくバランスよくはできますが あくまでなんとなくであって、 更にタイトルの文字数によって変わってきてしまうので 個別にcssを指定していかなければなりません。 （そういうものなのでしょうか。） ※例えば「new」画像が左置きなら、 background image を使って、hタグの css に padding-left:100px; などとすれば済みますよね（画像の分だけpaddingで空きを作る）。 でも右側に画像を置くとなると、こんなにも面倒なものなのでしょうか。 hタグのタイトルから右横に（例えば）20px空きをつくり画像を配置、 ということが簡単には出来ないものでしょうか。 それとも <h3>テキストテキストテキスト<img src="********"></h3> なんてことをしてもいいものでしょうか。 宜しくお願いします。
- ベストアンサー
- CSS
- プルダウンメニューで選択したものの画像を表示したい
こんにちは、HTML初心者です。 HTMLのページの上に画像があるのですがこの画像をその下にあるプルダウンメニューで選ばれたものによって表示を変更したいです。 例えばプルダウンメニューの「空」が選択されたらその上にある画像が空の画像になり「海」が選択されたら海の画像を表示するといった感じです。 インターネットで検索しているのですがなかなかこれといった書き方が見つかりません。 どなたか教えてください。よろしくお願いします！
- ベストアンサー
- HTML
