我目前正在研究 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>
但是有几个问题:
- 如果客户没有将鼠标悬停在该区域上，价格不会消失
- 我无法显示工具提示。
有谁知道如何解决这些问题？ 我感谢您的帮助
最佳答案
您可以添加以下属性来删除价格:
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('')" />
关于javascript - 鼠标悬停图像 map 上的工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26812304/