Javascript 鼠标悬停图像贴图上的工具提示_Javascript_Jquery_Html_Css

Javascript 鼠标悬停图像贴图上的工具提示

javascript jquery html css

Javascript 鼠标悬停图像贴图上的工具提示,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我目前从事2项职能；我为一张图片创建了一张图片地图，如果有人在图片的这一部分停留，右边会出现价格，鼠标下会出现一个工具提示，上面写着“发现”或类似的内容现在我有以下几点 <!DOCTYPE html> <html> <script> function writeText(txt) { document.getElementById("test").innerHTML = txt; } </script> </head> &

我目前从事2项职能；我为一张图片创建了一张图片地图，如果有人在图片的这一部分停留，右边会出现价格，鼠标下会出现一个工具提示，上面写着“发现”或类似的内容

现在我有以下几点

<!DOCTYPE html>
<html>

<script>
function writeText(txt) {
    document.getElementById("test").innerHTML = txt;
}
</script>
</head>

<body>
<img src ="test.png" alt="Jacket" usemap="#jacket" />

<p id="test"></p>
<map name="jacket">
    <area shape="poly" coords="174,361,149,350,180,203,217,213"href="test"; title="Discover" alt="Shop Now" onmouseover="writeText('$60')" />
  <map name="Map" id="Map">
    <area href="test"; title="Shop Now" alt="Discover" shape="poly" coords="221,215,183,218,190,164" onmouseover="writeText('$60')" />
</map> 
</map> 

</body>
</html>


函数writeText（txt）{
document.getElementById（“test”）.innerHTML=txt；
}

但也存在一些问题：

如果客户不在该区域停留，价格不会消失

我无法显示工具提示

有人知道如何解决这些问题吗？我感谢你的帮助

您可以添加以下属性以删除价格：

onmouseout="writeText('')"

而且，你有额外的分号，这可能是你的标题没有出现的问题。请尝试以下方法：

<map name="jacket">
   <area shape="poly" coords="174,361,149,350,180,203,217,213" href="test" title="Discover" alt="Shop Now" onmouseover="writeText('$60')" onmouseout="writeText('')" />
<map name="Map" id="Map">
   <area href="https://jerry123.myshopify.com/products/product1" title="Shop Now" alt="Discover" shape="poly" coords="221,215,183,218,190,164" onmouseover="writeText('$60')" onmouseout="writeText('')" />

标题会出现，但我希望它位于鼠标下的一个小框中。标题是如何显示的？你是说浏览器的工具提示吗？如果你想让其他提示出现并跟踪鼠标，那么你必须做一些更高级的事情。这绝对是“更高级”的一个例子。您应该使用jQuery（或equiv）跟踪鼠标移动，并移动/显示/隐藏提示。Net-a-porter使用jQuery来实现这一点。如果有帮助，请接受我的答案。谢谢Keith，我最终使用qTip2捕鼠