Javascript 如何从imagemap上的可单击点创建展开菜单？

所以我有这个身体图像，我想用它作为一种导航点，来访问每个身体部位的康复训练。我已将点映射到图像上，以便它们可以单击，但我希望这样，当单击某个点时，该点旁边会出现一个下拉菜单，其中包含更多选项。例如，如果单击肩部，则“虚弱”、“疼痛”和“酸痛”选项可能会显示在该点的右侧。我以前从未使用过图像贴图，我找不到如何使元素相对于其中一个贴图点显示。如果我可以在每个点中嵌套一个列表，那么我想我只能在单击相关身体部位时显示每个菜单，但图像贴图的工作方式似乎不是这样的。有更好的方法吗？这是我开始使用的代码笔，我没走多远，但我觉得一定有更好的方法来实现这一点

代码打开代码，因为我无法链接它而不包含一些代码：

<div id="frontBody">
    <img src="https://i.stack.imgur.com/YDMcB.png" alt="frontBody" usemap="#frontBody" id="frontBody">
</div>

<map name="frontBody">
    <area shape="rect" coords="176,106,199,136" alt="Shoulder">
    <area shape="rect" coords="171,270,197,307" alt="Hip">
    <area shape="rect" coords="225,280,254,309" alt="Wrist">
    <area shape="rect" coords="145,428,171,459" alt="Knee">
    <area shape="rect" coords="138,547,163,578" alt="Wrist">  
</map> 

---

关于定位或样式，下面的内容不是很高级，但可以为您提供一个起点（使用jQuery库完成）

var项={
肩部：[{txt:'Sh#1'，链接：'http://google.com'}，{txt:'Sh#2'，链接：'http://google.com'}],
Hip:[{txt:'Hip#1'，链接：'http://google.com'}，{txt:'Hip#2'，链接：'http://google.com'}],
膝盖：[{txt:'膝盖#1'，链接：'http://google.com'}，{txt:'Knee#2'，link:'http://google.com'}],
手腕：[{txt:'手腕#1'，链接：'http://google.com'}，{txt:'手腕#2'，链接：'http://google.com'}]
}
var$menu=$（'#menu'）。单击（函数（）{
$（this.hide（））
})
$（“区域”）。单击（函数（e）{
var part=this.alt，
$cont=$（“#菜单内容”）.empty（）；
//基于单击事件坐标的位置菜单
$menu.show（）.css({
上图：e.clientY，
左：e.clientX
});
$。每个（项目[部分]、功能（项目）{
$cont.append（“”）
})
})

#菜单{
位置：绝对；背景：白色；
边框：2个实心#ccc；
填充：20px；
显示：无；
宽度：200px；
}
#菜单a{
显示：块；
边缘底部：10px；
}

隐藏[X]

我想我可以使用一些Javascript来帮助您

<map name="frontBody">
    <area shape="rect" coords="176,106,199,136" alt="Shoulder" onclick='showCoords(event)'>
    <area shape="rect" coords="171,270,197,307" alt="Hip" onclick='showCoords(event)'>
    <area shape="rect" coords="225,280,254,309" alt="Wrist" onclick='showCoords(event)'>
    <area shape="rect" coords="145,428,171,459" alt="Knee" onclick='showCoords(event)'>
    <area shape="rect" coords="138,547,163,578" alt="Wrist" onclick='showCoords(event)'>  
</map> 

<div style='display:none;' id='menu'>
    <ul>
        <li>
            Item 1
        </li>
    </ul>
</div>

我不是为你设计的，因为我不知道你想要什么。

---

当然，如果您想使用jQuery，这会使事情变得更简单。

就个人而言，我认为图像映射不再像SVG那样被广泛使用。基本上，图像映射是不可伸缩的，使用SVG，您可以轻松地操纵事件或将事件附加到这些元素。一个快速的搜索产生了一篇关于两者比较的好文章：这看起来确实是一个不错的选择，我只是想找出在工作中做到这一点的最佳方法；安装新软件是一个缓慢的过程，我认为我现在在这台计算机上没有任何东西可以操作或创建SVG。有大量的在线资源可以帮助您在浏览器本身中创建SVG。谢谢，我还不太擅长Jquery，但这看起来很实用。我喜欢它。我没有注意到问题上没有jQuery标记……这是一个普通的js版本哦，这不是问题，但感谢您将其替换为js，让我更容易理解。很好的解决方案。我不确定我是否遗漏了什么，但小提琴什么都没做。看看你的代码。对不起，我忘了更新保存，现在可以了。jsiddle有一个bug，除非使用tagsYep，否则JS不会一直加载，现在可以工作了，哈哈。看起来不错，我会用这样的。

function drawBox(x,y){
  document.getElementById('menu').style.display = 'block';
  document.getElementById('menu').style.position = 'absolute';
  document.getElementById('menu').style.top = y+'px';
  document.getElementById('menu').style.left = x+'px';
}
function showCoords(event) {
    var x = event.clientX;
    var y = event.clientY;
    drawBox(x,y);
}