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>

然而，有一些问题：

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

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

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

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

1 个答案: