javascript - 图像映射；悬停在特定区域时显示文本

Question

logocopy3我在将图像的特定部分(区域 map )与悬停效果相关联时遇到问题。目前我可以点击图像 map 的每个部分并将我定向到所需的页面，但是我希望在用户点击之前显示悬停效果，以便他们知道他们正在导航到哪个页面。基本上，每次用户将鼠标悬停在特定区域上时，我都会尝试显示一个文本，该文本位于图像 map 上方的相同位置。

我的代码如下:

 <div>     
<img src="logocopy3.png" id="logo" style="width: 260px; max-width: 100%;    
height: auto;" alt="" usemap="#map" />

<map name="map">
    <area shape="circle" coords="243,132,41" href="Ktrack.html" alt=''/>
    <area shape="circle" coords="189,223,41" alt='' href="Kinsurance.html" />
    <area shape="circle" coords="69,205,29" alt='' href='Khealth.html'/>
    <area shape="circle" coords="9,131,42" alt='' href='Klocklock.html' />
    <area shape="circle" coords="128,49,81" alt='' href='index.html'/>
</map>

</div> 

Answer 1

我已经使用 tooltipster jquery 插件创建了一个演示，这是我发现的最佳方式；)

$(document).ready(function() {
  $('.tooltip').tooltipster({

  });
});

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
<link href="http://iamceege.github.io/tooltipster/dist/css/tooltipster.bundle.min.css" rel="stylesheet" />

<div>
  <img src="/image/JRo8A.png" id="logo" style="width: 260px; max-width: 100%;    
height: auto;" alt="" usemap="#map" />

  <map name="map">
    <area shape="circle" coords="243,132,41" href="Ktrack.html" class="tooltip" title="This is my image's tooltip message for area 1!" />
    <area shape="circle" coords="189,223,41" alt='' href="Kinsurance.html"  class="tooltip" title="This is my image's tooltip message for area 2!"/>
    <area shape="circle" coords="69,205,29" alt='' href='Khealth.html' class="tooltip" title="This is my image's tooltip message for area 3!"/>
    <area shape="circle" coords="9,131,42" alt='' href='Klocklock.html'  class="tooltip" title="This is my image's tooltip message for area 5!" />
    <area shape="circle" coords="128,49,81" alt='' href='index.html' class="tooltip" title="This is my image's tooltip message for area 6!" />
</map>

</div>