Imagemap;当悬停在特定区域时显示文本

logocopy3 我有问题将图像的特定部分（区域地图）与悬停效果链接起来。目前，我有能力点击图片地图的每一部分，并指引我进入所需的页面，但我希望在用户点击之前显示悬停效果，以便他们知道他们正在浏览哪个页面。基本上我试图显示一个文本，每次用户悬停在特定区域时，它都停留在图像地图上方的相同位置。Imagemap;当悬停在特定区域时显示文本

我的代码如下：

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

来源

2017-04-02 harry

你可以在里面使用title =“”属性来显示信息.. –

你能否详细说明一下，我用过tittle =“before before n没有似乎工作。鼠标悬停选项似乎对我来说准确，但我无法获得鼠标悬停链接到区域位置， – harry

你能上传logocopy3图像吗？ –

我一直在使用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="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>

来源

2017-04-03 10:52:45

就是这样，只需要玩CSS让文本出现在图像的顶部！非常感谢Sahill！ – harry

不客气哈利..请接受答案，并upvote，如果它的东西，以便将来的人可以参考这个;） –

有没有办法去掉悬停时出现的深灰色背景，所以它只是显示文字？ – harry

Imagemap;当悬停在特定区域时显示文本

回答

相关问题