Question

所以我有这个身体形象，我想用它作为一种导航点来访问每个身体部位的康复锻炼。我已经映射了图像上的点，因此它们是可点击的，但是我想在点击一个点时这样做，在该点旁边会出现一个带有更多选项的下拉菜单。例如，如果单击肩部，则选项“弱点”，“疼痛”和“疼痛”可能会显示在该点的右侧。我以前从未使用过图像地图，但我找不到如何使一个元素相对于其中一个地图点出现。如果我可以在每个点内嵌一个列表，那么我认为只有在单击相关的正文部分时我才能显示每个菜单，但它看起来不像是图像映射的工作方式。有一个更好的方法吗？这是我开始使用的codepen，我没有走得太远，但我觉得必须有更好的方法来实现这一目标。 https://codepen.io/anon/pen/JJeLWa

CodePen代码，因为我无法在不包含某些代码的情况下链接它：

<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>

Answer 1

以下关于定位或样式的方法不是很先进，但会给你一个起点（使用jQuery库完成）。

var items ={
  Shoulder:[{txt:'Sh #1',link:'http://google.com'},{txt:'Sh #2',link:'http://google.com'}],
  Hip:[{txt:'Hip #1',link:'http://google.com'},{txt:'Hip #2',link:'http://google.com'}],
  Knee:[{txt:'Knee #1',link:'http://google.com'},{txt:'Knee #2',link:'http://google.com'}],
  Wrist:[{txt:'Wrist #1',link:'http://google.com'},{txt:'Wrist #2',link:'http://google.com'}]
}
var $menu = $('#menu').click(function(){
   $(this).hide()
})

$('area').click(function(e) {
  var part = this.alt,   
    $cont = $('#menu-content').empty();
     // position menu based on coordinates of click event
     $menu.show().css({
      top: e.clientY,
      left: e.clientX
    });

  $.each(items[part], function(_, item) {
    $cont.append('<a href="' + item.link + '">' + item.txt + '</a>')
  })
})

#menu {
  position: absolute; background: white;
  border: 2px solid #ccc;
  padding: 20px;
  display: none;
  width: 200px;
}

#menu a {
  display: block;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<div id="menu">
  <div id="menu-hide">
    Hide[X]<br>
  </div>
  <div id="menu-content">

  </div>
</div>

<强> JS fiddle demo

Answer 2

我想我可以帮忙，使用一些Javascript。

instance_eval(IO.read(File.expand_path('../../policyfiles/base.rb', '../../policyfiles/app.rb',  __FILE__)))

现在在您的脚本文件中。

<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>

我没有为你设计风格，因为我不知道你想要什么。 Fiddle

当然，如果你想使用jQuery，那会让事情变得更容易。

如何从图像地图上的可点击点创建展开式菜单？

2 个答案: