Javascript 具有不同覆盖/工具提示的图像贴图

所以我对一般的编码比较陌生，我想我可以在这里寻求一些帮助

我已经为一张图片创建了一张图像地图。 不同的部分应显示不同的叠加或speechbubble工具提示，并在悬停区域（带有文本）和可单击链接旁边的固定位置。但我不知道如何正确地做到这一点

基本上，互动式教学

我的第一次尝试（对我来说）在编辑方面有点前途，但在“现场测试”中失败了：

舒伦苏切
你是谁
滴度，
LMS编码为Schlagwörtern suchen
学院
最好的学院
Lehrangebote für
veschiedene Funktionen and
Bereiche
舒伦计划
所有的舒伦根，你都会死的
你是我的朋友，我的朋友
zugewiesen是一家合规性公司。
合规性公司是一家名为müssen bearbeitet werden的公司<你呢
哈本·伊恩·法利格凯茨塔姆。你死了，所以
沃格塞泽情报中心
->Fragen zu Compliance Schulungen？箱式安克里肯
绝对的历史
在第30页中，他是一位绝对的艺术家。
哈菲格
这是一个很好的例子
Optionen
BeschreibungLink
.工具提示{
位置：绝对位置；
显示：内联块；
光标：帮助；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：200px；
背景颜色：灰色；
颜色：#fff；
文本对齐：左对齐；
边界半径：3px；
填充物：5px 5px；
边框：1px点黑色；
位置：相对位置；
z指数：1；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}

如果这看起来真的很乱，很抱歉

提前谢谢你的帮助

。工具提示{
位置：相对位置；
}
.工具文字{
位置：绝对位置；
大纲：无；
宽度：300px；
背景色：#e86d6d；
颜色：黑色；
边界半径：5px；
盒影：5px5px8pxRGBA（55,55,55,65）；
z指数：10；
断字：断字；
填充：10px；
不透明度：0；
-webkit转换延迟：3s；
-webkit转换：不透明度2s；
/*-moz转变：不透明度2s；
-ms转换：不透明度2s；
-o-转变：不透明度2s*/
过渡延迟：3s；
过渡：不透明度2s；
//可见性：隐藏；
}
.tooltip:悬停.tooltiptext{
不透明度：1；
能见度：可见；
}
.tooltip:悬停.tooltiptext{
不透明度：1；
-webkit转换：不透明度.8s；
过渡：不透明度.8s；
}
.tooltip.tooltiptext:悬停{
不透明度：1；
-webkit转换：不透明度.8s；
过渡：不透明度.8s；
}

---

好的，我的方法如下：

我会避免使用img和map标签。 如果图像上需要的区域只是矩形，我相信这是最好的方法

以下是您需要做的：

创建容器div并将其背景设置为图像。您还可以根据图像大小设置高度和宽度。将此div设置为相对位置或绝对位置

根据您想要的悬停区域创建子div。将这些div设置为绝对位置，并根据要悬停的区域指定宽度和高度

在每个子div中创建另一个div，在其中输入工具提示文本。将此div设置为

display:none

为悬停状态添加css，以便将工具提示div设置为

display:block

您的HTML应该如下所示

<div class="main-img">
  <div class="invisible-area area-one">
    <div class="tooltip">
     I'm a tooltip!
    </div>
  </div>
    <div class="invisible-area area-two">
    <div class="tooltip">
     I'm another tooltip!
    </div>
  </div>
</div>

这是一个-悬停在图片中人物的头部

编辑

这是另一个包括你上传的图片。 应该在工具提示中添加更多的不可见区域div。

---

你所需要做的就是给他们准确的宽度、高度和位置（上，左）。

提示：将你的风格放在

标记中使用地图是一个非常古老的范例。你能再解释一下你想得到什么吗？鼠标悬停在图像上时是否仅显示工具提示？@Pascal T:当您从该坐标悬停时，工具提示将不会保留在那里。然后你将如何点击链接。请看我贴的答案。我认为这符合你的所有要求。@Roysh我有一个不同区域的图像。每个区域都应该有一个工具提示（位于该区域的正上方），如果您将鼠标悬停在该区域上，该提示就会显示出来。另外，可能会定时，以便我可以把链接（否则我会直接链接该地区）你有链接到确切的图像吗？谢谢！我在Chrome中工作得很好，但不幸的是在IE 11中没有。。还有没有办法使工具提示位置固定在相应区域的上方？如果这个盒子在我看来停留了一定的时间，一个可点击的链接是可能的。@PascalT:我改变了我的答案。现在，当您从类

tooltip

中移出鼠标时，

tooltiptext

会停留5秒钟并逐渐消失。您也可以单击地图中的链接或

区域

。请正确设置

rect

的坐标。我刚放了点东西。请将答案向上投票，并结束提问。谢谢非常感谢！：）因为我的分数低于15分，所以我的选票没有显示出来，对不起@帕斯卡尔特：没有问题。接受答案表示解决方案符合问题期望。这也阻止了其他人花时间回答这个问题。任何有知识的贡献者都可以编辑我的答案。另外，接受答案会帮助其他人知道这是一个可以遵循的答案。还有一件事：它似乎在IE11中不起作用，我读到它是

：hover

，你能帮我解决这个问题吗？（我在这里读到了这个解决方案：）所以，我只上传了覆盖图到imgur:，我以前使用过地图，因为它看起来更简单：）有可能有不同的区域和工具提示大小（一个框没有那么多内容，另一个框有很多内容，例如）？它将是600 x 850（高x宽）是的。检查一下我的小提琴，你可以把它调好

<div class="main-img">
  <div class="invisible-area area-one">
    <div class="tooltip">
     I'm a tooltip!
    </div>
  </div>
    <div class="invisible-area area-two">
    <div class="tooltip">
     I'm another tooltip!
    </div>
  </div>
</div>

.main-img {
  height: 500px;
  width: 500px;
  position: relative;
  background: url('your image URL here') no-repeat center;
  
}
.invisible-area {
  position: absolute;
  height: 100px;
  width: 100px;
}
.area-one{
    top: 135px; //set here the position of the area
    left: 90px;
}
.area-two {
  top: 135px; //other area position
  left: 275px; 
}
.tooltip {
  display: none;
 /*optional tooltip design*/
  background: white;
  border-radius: 5px;
  border: 1px black solid;
}
.invisible-area:hover .tooltip {
  display: block;
}