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

tooltip on mouseover image map

本文关键字：工具提示 地图 悬停 图像 鼠标      更新时间：2023-09-26

我目前正在处理两个函数；我为一张图像创建了一张图像地图，希望有人在图像的这一部分悬停，右边会显示价格，鼠标下会有一个工具提示，上面写着"发现"或类似的内容。

现在我有以下

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

但是也有一些问题：

  1. 如果客户没有在该区域上空悬停，价格不会消失
  2. 我无法显示工具提示

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

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

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('')" />

相关文章：