Question

我有一个图像，并且在该图像中具有某些坐标。我需要实现的是，当有人将鼠标悬停在某个坐标内时，我需要显示与其相关的模式。

我已经把这部分工作了。（请参见代码）-它几乎可以完成我需要做的事情，但是我必须将鼠标悬停在坐标上才能显示模态，当我在坐标内时它不起作用-仅在边界上起作用。

$(document).ready(function(e) {

  $('.hoverArea').hover(
    // this function is executed when entering the element with the mouse
    function(e) {
      var modalID = $(this).data("target");
      $(modalID).modal('show');
    },
    // this one when leaving
    function(e) {
      var modalID = $(this).data("target");
      $(modalID).modal('hide');
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>




<img src="https://i.stack.imgur.com/Q2KGJ.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area class="hoverArea" data-target="#serviceModal0" alt="" title="Test 10" href="#" shape="poly" coords="290,148,303,184,253,216,236,187,235,157" />
    <area class="hoverArea" data-target="#serviceModa8" alt="" title="Test 8" href="#" shape="poly" coords="17,116,7,176,53,198,103,190,139,147,99,102" />
    <area class="hoverArea" data-target="#serviceModal1" alt="" title="Test 11" href="#" shape="poly" coords="530,106,521,159,566,171,599,150,589,112" />
</map>


<div style="display:none" class="modal fade bs-example-modal-sm servicesModal" id="serviceModal0" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="false">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <p data-dismiss="modal" style="position:absolute;right: 7px;top:-6px;color:white;font-size:30px;cursor:pointer;">&times;</p>

              <p style="text-align:center;">
                            Service Modal 10
              </p>
          </div>
        </div>
      </div>
      
      <div style="display:none" class="modal fade bs-example-modal-sm servicesModal" id="serviceModa8" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="false">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <p data-dismiss="modal" style="position:absolute;right: 7px;top:-6px;color:white;font-size:30px;cursor:pointer;">&times;</p>

              <p style="text-align:center;">
                            Service Modal 8
              </p>
          </div>
        </div>
      </div>
      
      
      
      <div style="display:none" class="modal fade bs-example-modal-sm servicesModal" id="serviceModal1" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="false">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <p data-dismiss="modal" style="position:absolute;right: 7px;top:-6px;color:white;font-size:30px;cursor:pointer;">&times;</p>

              <p style="text-align:center;">
                            Service Modal 11
              </p>
          </div>
        </div>
      </div>

我已经看到了使用工具提示的解决方案，但是有没有办法使用图像映射线和模式来实现呢？

谢谢

将鼠标悬停在图像地图中的特定区域时显示元素

0 个答案: