質問: ### 前提・実現したいこと HTML/CSSもしくはJavaScript,jquery等を使用して,以下のようなメニューを作りたい. 1.一枚画像の一部をタップ(もしくはクリック,以後クリックと書く)して,吹き出し型リストメニューを出したい. 2.尚,その画像はイメージマップのように,クリック場所によってメニュー項目が変わる. 3.吹き出しはクリックしたところで出せたらベストです. 画像クリックで出た吹き出し項目がリストメニューの一段目のようなイメージです. 以下は,茶色の円をクリックしたときのイメージです.黄色の四角をクリックしたときも同様にメニュー(メニュー項目は異なる)が現れるようにしたいです. ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/142424debdfd8052b1a52a1d41a2724a.jpeg) 追加補足: 上のイメージの画像は2つあるように見えますが,実際は1つの画像と思って下さい. 黄色と茶色の部分にイメージマップがあるというイメージです. 上記1,2を簡単に実現する方法として,どのような実装方法がありますか? CSSだけで行うことは可能でしょうか? また,イメージマップとかCSSだけとかのこだわりはなく,どんな方法でも構わないので, ご存じの方,どうかよろしくお願いします. ### 試したこと htmlのイメージマップとjqueryのpowertipというもので,試してみましたがtooltipの中にtooltipだと実現できませんでした.おそらく方向性も間違っていると思います. ### 補足情報 最終的にメニュー項目は動的にしたいと思ってます.
回答: メニューは置いておいてクリック位置で要素を出し分ける部分について。 ###### 1. クリック位置から座標を取ってそこに表示 中身の書き換えも動的に行うこともできる。(メニューHTMLの生成もJavaScriptでやってしまうとか) 【click - Event reference | MDN】 【jQuery: イベントが発生した時のマウス情報を取得するには?(イベントオブジェクト) - Build Insider】 【JavaScriptでマウスの位置座標を取得する方法】 ###### 2. 表示するエリアにクリック用の要素を置いておく方法 JavaScriptを使わないスタイルで組むならこういう方法かな。 ``` ``` ``` .wrap { display: inline-block; position: relative; } img { display: block; } .point { position: absolute; height: 100px; width: 100px; opacity: .1; } .point:hover { opacity: .8; } .p1 { top: 10px; left: 10px; background-color: green; } .p2 { bottom: 10px; right: 10px; background-color: blue; } ``` **動くサンプル:**