Question

我有一个响应式图像地图，当区域悬停时，我需要显示弹出窗口。我无法在每个区域中使用title标签，因为我希望能够显示html内容。

我在这里创建了一个示例-可以正常工作，但并非始终如一。不知何故，当您第一次将鼠标悬停在弹出区域时，其他时候却没有。

我希望有人可以帮助我稳定脚本。

脚本：

// imageMapResize() comes from an external ressource
$('map').imageMapResize();
createHover();

function createHover() {
  $('area').each(function(i) {
    $('area').eq(i).bind('mouseover mousemove', function(e) {
      $('.one,.two,.three,.four').eq(i).css({
        "top": e.pageY - $('.popup').offset().top + 300,
        "left": e.pageX - $('.popup').offset().left - 100
      }).addClass('in');
    })
    $('area').eq(i).bind('mouseout', function() {
      $('.one,.two,.three,.four').removeClass('in');
    });
  });
}

//On resize, wait and reload function
var it;

window.onresize = function() {
  clearTimeout(it);
  it = setTimeout(function() {
    createHover();
  }, 200);
};

HTML：

<img src="https://i.paste.pics/c12eb9a681af68d0bcab2af25d09f5ab.png" usemap="#image-map">

<map name="image-map">
    <area coords="7,2,118,3,118,121,3,123" shape="poly">
    <area coords="136,4,135,117,250,123,251,10" shape="poly">
    <area coords="4,136,125,136,125,253,4,253" shape="poly">
    <area coords="136,138,256,137,256,252,134,254" shape="poly">
</map>

<!-- Popups -->
<div class="msg one" role="tooltip">
  <div class="msg-arrow"></div>
  <div class="msg-inner">
    Content 1
  </div>
</div>

<div class="msg two" role="tooltip">
  <div class="msg-arrow"></div>
  <div class="msg-inner">
    Content 2
  </div>
</div>

<div class="msg three" role="tooltip">
  <div class="msg-arrow"></div>
  <div class="msg-inner">
    Content 3
  </div>
</div>

<div class="msg four" role="tooltip">
  <div class="msg-arrow"></div>
  <div class="msg-inner">
    Content 4
  </div>
</div>

<div class="popup"></div>

JsFiddle here。

带有自定义弹出窗口的自适应图像地图

0 个答案: