jquery - 带有自定义弹出窗口的响应式图像映射

Question

我有一个响应式图像地图，当区域悬停时我需要显示弹出窗口。我不能在每个区域使用标题标签，因为我希望能够显示 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 在这里。

标签： jquerycssimagemap