在图像的特定位置打开弹出窗口？

Question

我在 HTML 页面中有一个图像。我想当鼠标悬停在该图像的不同区域时显示不同的信息。例如，我想当鼠标悬停在图像上的point-1上时显示信息-1。当离开时，我希望隐藏信息 1，当鼠标悬停在点 2 上时，我想弹出信息 2。使用任何类型的库的 JS 都可以实现吗？

Answer 1

是的，这是可能的。 您可以通过两种方式进行处理：

1. 图像地图 - 只是一个教程链接
2. 使用 CSS 将透明元素定位在图像上方，并在其中一个元素悬停时显示一些文本。

我制作了这支笔来向您展示使用方法2的示例。和方法1差不多，只需要稍微改一下代码即可。

HTML

<div class="img-wrapper">
  <img src="http://i.imgur.com/ZY0gdtF.jpg" alt="">

  <div class="cloud">
    <p>Hey a cloud!</p>
  </div>
  <div class="tree">
    <p>Tree here</p>
  </div>
  <div class="grass">
    <p>Green Grass</p>
  </div>
</div>

JS

$('.cloud, .grass, .tree').hover(function(){
    $(this).find('p').show();
}, function(){
   $(this).find('p').hide();
});

当然，这一切只是一个示例。 虽然第一种方法允许您定义形状，但第二种方法则不允许。

使用方法 1 可以让您定义更准确的区域，但这可能很困难。方法2更简单，但准确性较差。您的需求，您的选择。

Answer 2

您可以依赖像 image-map.net 这样的工具，它可以生成纯 HTML 代码，例如：

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://i.imgur.com/ZY0gdtF.jpg" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Nuage" title="Nuage" href="https://fr.wikipedia.org/wiki/Nuage" coords="0,0,485,202" shape="rect">
    <area target="_blank" alt="Arbre" title="Arbre" href="https://fr.wikipedia.org/wiki/Arbre" coords="150,334,125,435,172,506,276,570,363,571,423,518,483,470,506,412,485,343,438,281,333,241,233,237" shape="poly">
</map>