所以我对编码总体上比较新，我想我可以在这里寻求帮助。
我为图片创建了一张图片地图。 不同的部分应显示不同的叠加或语音泡泡工具提示，其中固定位置位于悬停区域（带文本）和可点击链接旁边。但我不知道如何正确地做到这一点。
基本上是一种互动教学。
我的第一次尝试在编辑器中对我有所帮助，但在“现场测试”中失败了：
<!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>
对不起，如果这看起来很乱。
提前感谢您的帮助！
答案 0 :(得分：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>
答案 1 :(得分：1)
好的，这是我的方法：
我会避免使用img和map标签。 如果您在图像上需要的区域只是矩形，我相信这是最好的方法。
以下是您需要做的事情：
1）创建一个容器div并将其背景设置为您的图像。您还可以根据图像大小设置高度和宽度。将此div设置为位置相对或绝对。
2）根据您想要的悬停区域创建子div。使用绝对位置设置这些div，并根据您想要悬停的区域给出它们的高度和宽度。
3）在每个子div中创建另一个div，您将在其中输入工具提示文本。将此div设置为display: none
4）添加css，当你悬停区域div时，工具提示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;
}
这是fiddle - 将鼠标悬停在图片中字符的头部
修改
这是另一个fiddle，其中包含您上传的图片。 您应该添加更多不可见区域div以及它们的工具提示。 您需要做的就是给它们准确的高度和宽度和位置（顶部，左侧）。