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

Question

我目前正在研究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>

但是，存在一些问题：

1. 如果客户未将鼠标悬停在该区域，价格不会消失
2. 我无法显示工具提示。

有谁知道如何解决这些问题？ 感谢您的帮助

Answer 1

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

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