Question

所以，问题是我在网站上创建了某种地图。每当您将鼠标悬停在地图上的城市上时，您就会穿过一个热点区域，该区域会显示一个弹出框，并提供有关相关城市中团队的信息。在Firefox中它运行得非常好，但在Chrome中它似乎没有检测到锚标签属性创建的热点。

html索引中定义的pop框

<div id="pop1" class="popbox">
   <h2>Youth Academy Bucuresti</h2>
   <p>Membri:</p>
</div>
[...] more pop boxes [...]

地图

<img src="images/first_try.png" usemap="#yaro" style="margin-bottom: 100px;">
<map name="yaro">
   <a shape="rect" coords="355,375,425,403" href="#" class="popper" data-popbox="pop1"></a>
[...] more anchor tags [..]
</map>

为什么在使用Chrome浏览网站时，未检测到热点？可能是因为HTML5还没有正式支持属性“形状”，“coords”？

它在Firefox中的样子：http://imgur.com/wi3wdYJ（我的光标在Piatra Neamt城市上空）

Answer 1

使用area代码而不是a。

似乎为我工作http://codepen.io/elliz/pen/FgeqE

<h2>Test with `area` tags</h2>

<img usemap="#area" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABaAQMAAAAFCM8RAAAABlBMVEX/DAD/45HIkMgSAAAAIklEQVR4XmMYsmAU1P8HgwPMEPrf8BQcFRwVHBUcqmAUAACXrqnfUify7gAAAABJRU5ErkJggg=="/>

<map name="area" id="area">
  <area shape="rect" title="Left box" href="#" coords="17,21,73,68" />
  <area shape="rect" title="right box" href="#" coords="86,21,142,68" />
</map>

Answer 2

之前尝试使用“区域”标签，但它无法正常工作，因为我忘了在弹出的javascript文件中更改某些内容。现在一切都很好。关于狭窄桌面上的网站，mhm，列表似乎很好，但我会看到该组织的其他成员对此的看法，因为他们很长一段时间都想要这种表示（罗马尼亚的城市地图）参与组织）。

锚标记的热点属性在Chrome中无效

2 个答案: