HTML form selectメニューの中の文字列にカーソルが当たった際のイメージ表示方法

締切済

質問者：vibrato
質問日時：2017/12/03 16:58
回答数：2件

HTML form selectボックスにおいて

selectメニューの中の文字列にカーソルが当たった際に、
イメージを表示させる方法はありますでしょうか？

ーーーーー
犬
猫
ウサギ
ーーーーー
とあった場合、犬にカーソルを合わせると犬の画像が表示されるという様なことです。
猫・ウサギもそれぞれ同様です。

どのようにすべきでしょうか？
宜しくお願いします！！

回答ありがとうございます。

javascriptほとんど触れたことがないので、
よろしければ
ーーーーー
犬
猫
ウサギ
ーーーーー
を使ってサンプルコードを書いていただけないでしょうか？
そのコードを見て勉強させていただきたいです。

是非よろしくお願い致します！！

No.1の回答に寄せられた補足コメントです。補足日時：2017/12/04 14:16
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2017/12/05 14:40

＃1です。

＞を使ってサンプルコードを書いていただけないでしょうか？
なるべくスクリプトを使わない例で考えてみましたので、とりあえず「表示できるよ」というだけのサンプルです。
セレクト要素をリスト化するのに、#1で紹介したもののうちdropkickというものを使用してみました。
私も使ったことはないので内容を把握していないため、ライブラリの見本の設置方法をそのまま利用しています。
http://dropkickjs.com/

画像の表示を#1で示したようなCSSで指定するにしても、実際はdropkickのCSSの内容を把握し、場合によっては修正が必要と思いますが、面倒なのでライブラリはそのままにして、かなり適当に設定しています。
（画像の位置を指定をするのに、最初はposition:absoluteで試みましたが、どこかにoverflow:hidden等があるようでうまくいかないため、position:fixedで少々無理やりな位置決めにしちゃってますので、その辺りは適切に修正が必要かと思います）

※ ここの記事では、urlがリンクに省略変換されますので、jsおよびcssのurlにはご注意ください。
※ fx57、Chrome62にて動作確認しています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dropkickjs@2.2.2/di …
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropkickjs@2.2.2/di … type="text/css">

<style type="text/css">
#wrap1 li:hover::after {
content:"";
position:fixed; top:5px; left:250px;
display:block; width:200px; height:100px;
}

#wrap1 li:first-child:hover::after { background:url("A.jpg"); }
#wrap1 li:nth-child(2):hover::after { background:url("B.jpg"); }
#wrap1 li:nth-child(3):hover::after { background:url("C.jpg"); }
</style>
</head>
<body>

<form name="form1">
<div id="wrap1">
<select name="select1" id="select1">
<option value="犬">犬</option>
<option value="猫">猫</option>
<option value="ウサギ">ウサギ</option>
</select>
</div>
</form>

<script type="text/javascript">
var select = new Dropkick( "#select1");
</script>
</body>
</html>

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2017/12/04 11:02

こんにちは

要素のスタイルはCSSでと言いたいところですが、フォーム要素周り（特にselect要素）のCSSへの対応は遅れているようです。

CSS3でappearanceができたようですが、どうやら、まだ自由度は低いようですね。
https://developer.mozilla.org/ja/docs/Web/CSS/-m …
https://edge.sincar.jp/web/selectbox-appearance- …
手元のブラウザ（fx57、Chrome62、IE11）で試してみたところ、hoverが効くのはIE11だけでした。

・・というわけで、どうしても実現なさりたいのであれば、javascriptを利用してselect要素を隠して（非表示状態にして）別の要素（例えばリスト等）を代わりに表示するようにすることで、ご質問の機能を実現することは可能だと思います。
以前から、select要素を自由にデザインするために上記のような書き換えを行うライブラリはいろいろ作られているようです。
（画像を表示するような機能までは備えてはいませんけれど）
http://phpjavascriptroom.com/?t=ajax&p=jquery_pl …

上記のようなものを利用したり、あるいは自作でリスト等に置き換えてしまえば
li:hover::after {
　content:"";
　display:block;
　width: 100px;
　height:100px;
　background: url(A.jpg);
}
のような方法で、画像を表示することは可能ですね。
スクリプトを自作することができるなら、CSSでなくとも、hoverイベントを取得することでより自由に表示することも可能だと思います。