具有不同叠加层/工具提示的图像地图

Question

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

我为一张图片创建了一个图像映射。 不同的部分应显示不同的覆盖或语音气泡工具提示，并在悬停区域（带有文本）和可点击链接旁边固定位置。 但我不知道如何正确地做到这一点。

基本上，一个交互式指令。

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

<!DOCTYPE html>
<html>
<body>

<img src="PICTURE LINK" 
width="850" height="600" alt="MitarbeiterAnsicht" usemap="#map1">

<map name="map1">

<div class="tooltip">
<area shape="rect" coords="20, 195, 150, 220" alt="Schulungssuche" >
<span class="tooltiptext"><b>Schulungssuche</b><br>Hier können sie nach 
Titel,<br>LMS Code oder Schlagwörtern suchen </span>
</div>

<div class="tooltip">
<area shape="rect" coords="13, 310, 187, 500" alt="Colleges" >
<span class="tooltiptext"><b>Colleges</b><br>Colleges sind bestimmte 
Lehrangebote für <br>veschiedene Funktionen und <br>Bereiche</span>
</div>

<div class="tooltip">
<area shape="rect" coords="190, 158, 557, 550" alt="Schulungsplan" 
href="LINK">
<span class="tooltiptext"><b>Schulungsplan</b><br>Der Schulungsplan 
beinhaltet alle Schulungen,<br>zu denen Sie bereits angemeldet sind, die 
Sie<br>sich selbst zugewiesen haben, die Ihr Vorgesetzter<br>ihnen 
zugewiesen hat oder Compliance Schulungen.<br><font 
color="#FF0000">Compliance Schulungen müssen bearbeitet werden !<br>Sie 
haben ein Fälligkeitsdatum. Überschreiten Sie<br>dieses Fälligkeitsdatum, so 
wird automatisch ihr<br>Vorgesetzer informiert!</font><br><font 
color="0000ff">-> Fragen zu Compliance Schulungen? Box anklicken</font>
</span>
</div>

<div class="tooltip">
<area shape="rect" coords="565, 158, 740, 347" alt="Absolviert" >
<span class="tooltiptext"><b>Absolvierte Schulungen</b><br>Die Lernhistorie 
zeigt alle, in den letzten 30<br>Tagen absolvierten Schulungen an.</span>
</div>

<div class="tooltip">
<area shape="rect" coords="565, 453, 647, 470" alt="FAQ"> <b>Häufig 
gestellte Fragen</b><br><font 
color="0000ff"> Box anklicken, um zum FAQ weitergeleitet zu werden</font>
</span> 
</div>

<div class="tooltip">
<area shape="rect" coords="565, 485, 647, 505" alt="Optionen" href="LINK" >
<span class="tooltiptext"> <b>Optionen</b><br>Beschreibung<font 
color="0000ff">Link</font></span>
 </div>

</map>

<style>
.tooltip {
position: absolute;
display: inline-block;
cursor: help;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: grey;
color: #fff;
text-align: left;
border-radius: 3px;
padding: 5px 5px;
border: 1px dotted black;

position: relative;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</body>
</html>

对不起，如果这看起来真的很乱。

提前感谢您的任何帮助！

Answer 1

好的，这是我的方法：

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

您需要执行以下操作：

1. 创建一个容器 div 并将其背景设置为您的图像。 您还可以根据图像大小设置高度和宽度。 将此 div 设置为position relative 或 absolute 。

2. 根据您想要的悬停区域创建子 div。 将这些 div设置为绝对位置，并根据您要悬停的区域赋予它们宽度和高度。

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

4. 为悬停状态添加 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>

和 CSS

.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;
}

这是一个小提琴- 将鼠标悬停在图像中字符的头部上方

编辑

这是另一个小提琴，其中包含您上传的图像。 您应该添加更多不可见区域 div 及其工具提示。 您需要做的就是为它们提供准确的宽度、高度和位置（顶部、左侧）。

Answer 2

 .tooltip { position: relative; } .tooltiptext { position: absolute; outline: none; width: 300px; background-color: #e86d6d; color: black; border-radius: 5px; box-shadow: 5px 5px 8px rgba(55, 55, 55, .65); z-index: 10; word-break: break-word; padding: 10px; opacity: 0; -webkit-transition-delay: 3s; -webkit-transition: opacity 2s; /*-moz-transition: opacity 2s; -ms-transition: opacity 2s; -o-transition: opacity 2s;*/ transition-delay: 3s; transition: opacity 2s; //visibility:hidden; } .tooltip:hover .tooltiptext { opacity: 1; visibility: visible; } .tooltip:hover .tooltiptext { opacity: 1; -webkit-transition: opacity .8s; transition: opacity .8s; } .tooltip .tooltiptext:hover { opacity: 1; -webkit-transition: opacity .8s; transition: opacity .8s; }

 <body> <img src="http://www.georgemaps.com/wp-content/uploads/2016/06/vintage-world-map-high-resolution-old-global-hd-desktop-wallpaper-widescreen-definition-x-1.jpg" width="450" height="400" alt="MitarbeiterAnsicht" usemap="#map1"> <map name="map1"> <div class="tooltip"> <area id="meow" shape="rect" coords="20, 195, 150, 220" alt="Schulungssuche" href="http://www.stackoverflow.com" > <span class="tooltiptext"><b>Schulungssuche</b><br>Hier können sie nach Titel,<br>LMS Code oder Schlagwörtern suchen <a href="http://www.stackoverflow.com"> Stackoverflow</a> </span> </div> <div class="tooltip"> <area shape="rect" coords="13, 310, 287, 300" alt="Colleges" href="http://www.stackoverflow.com"> <span class="tooltiptext"><b>Colleges</b><br>Colleges sind bestimmte Lehrangebote für <br>veschiedene Funktionen und <br>Bereiche <a href="http://www.stackoverflow.com"> Stackoverflow</a> </span> </div> <div class="tooltip"> <area shape="rect" coords="290, 158, 257, 50" alt="Schulungsplan" href="http://www.stackoverflow.com"> <span class="tooltiptext"><b>Schulungsplan</b><br>Der Schulungsplan beinhaltet alle Schulungen,<br>zu denen Sie bereits angemeldet sind, die Sie<br>sich selbst zugewiesen haben, die Ihr Vorgesetzter<br>ihnen zugewiesen hat oder Compliance Schulungen.<br><font color="#FF0000">Compliance Schulungen müssen bearbeitet werden !<br>Sie haben ein Fälligkeitsdatum. Überschreiten Sie<br>dieses Fälligkeitsdatum, so wird automatisch ihr<br>Vorgesetzer informiert!</font><br><font color="0000ff">-> Fragen zu Compliance Schulungen? Box anklicken</font> <a href="http://www.stackoverflow.com"> Stackoverflow</a> </span> </div> </map> </body>