不同覆盖层/工具提示的图像映射

Question

不同覆盖层/工具提示的图像映射

javascriptjqueryhtmlcss

3

我对编码相对较新，希望在这里寻求一些帮助。

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

基本上，需要交互式指示。

我在编辑器中的第一次尝试对我来说有些令人鼓舞，但在“现场测试”中失败了：

<!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>

抱歉，如果这看起来很乱。谢谢您提前的任何帮助！

- Pascal T

提示：将您的样式放在<head>标签内。 - N. Ivanov

使用map的方式相当古老了。你能更详细地解释一下你想要什么吗？你只是想在悬停在图像上时显示一个工具提示吗？ - Roysh

@Pascal T：当你从该坐标移开鼠标时，工具提示将不会保留在那里。那么你如何点击链接呢？请查看我发布的答案。我认为那符合你的所有要求。 - Om Sao

@Roysh 我有一张带有不同区域的图片。每个区域应该有一个工具提示（在该区域正上方显示），当你将鼠标悬停在上面时就会出现。此外，也许可以设置定时器，这样我就可以放置链接（否则我将直接链接该区域）。 - Pascal T

如果您可以提供图片链接并告诉我哪些部分应该显示工具提示，我可以立即修复它。如果您的所有区域都是矩形，则有一种更简单的方法。 - Roysh

显示剩余5条评论

2个回答

1

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

- Om Sao

谢谢！在Chrome中它运行良好，但遗憾的是在IE 11中不行。是否还有一种方法可以使工具提示位置固定在相应区域上方？如果框保持一段时间，可点击链接就可能实现。 - Pascal T

@PascalT：我修改了我的回答。现在当你从类'tooltip'移开鼠标时，'tooltiptext'会停留5秒钟并消失。你也可以点击地图中的链接或区域。请正确设置'rect'的坐标。我只是随便放置了一些东西。并且请给答案点赞并关闭问题。谢谢！ - Om Sao

非常感谢！由于我的积分低于15分，我的点赞没有显示，抱歉！ - Pascal T

@PascalT：没有问题。接受一个答案意味着该解决方案符合问题的期望。它还可以阻止其他人花时间回答它。任何有知识的贡献者都可以编辑我的答案。此外，接受答案将帮助其他人知道这是一个要遵循的答案。 - Om Sao

还有一件事：它似乎在IE11中无法工作，我读到这是与:hover有关的问题，你能为我修复吗？（我在这里阅读到了解决方案：Stackoverflow链接） - Pascal T

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roysh · Accepted Answer

好的，这是我的建议：

我建议避免使用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>

以及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;
}

这是一个演示 - 悬停在图像中的字符头上。编辑这是另一个演示，包含了您上传的图像。您需要添加更多的invisible-area div和它们的提示信息。您只需给它们确定的宽度、高度和位置 (上、左)。