Question

logocopy3 我有问题将图像的特定部分（区域地图）与悬停效果联系起来。目前我可以点击图像映射的每个部分，它会将我引导到所需的页面，但我希望在用户点击之前显示悬停效果，以便他们知道他们要导航到哪个页面。基本上我试图在每次用户盘旋在特定区域上时显示位于图像映射上方的相同位置的文本。

我的代码如下：

 <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插件创建了一个演示，这是我发现的最佳方式;）

＆＃13;

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

＆＃13;

<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="https://i.stack.imgur.com/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>

＆＃13;

图像映射;将鼠标悬停在某个区域上时显示文字

1 个答案: