Anchor标记的热点属性在Chrome中不起作用

所以，我在网站上创建了某种地图。每当您将鼠标悬停在位于地图上的城市上时，您都会穿过热点区域，使弹出框出现并提供有关位于相关城市的团队的信息。在Firefox中，它的效果非常好，但是在Chrome中它似乎没有检测到由锚标记属性创建的热点。Anchor标记的热点属性在Chrome中不起作用

弹出框的HTML索引中定义

<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的网站上，都没有检测到的热点？可能是因为“shape”，“coords”这些属性还没有被HTML5支持？

它的外观在Firefox：http://imgur.com/wi3wdYJ（我的光标是在城市皮亚特拉尼亚姆茨）

来源

2014-08-28 Laurentiu Diaconu

使用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>

来源

2014-08-28 11:01:18 Ruskin

这都是因为a的“coords”和“shape”属性在HTML5中已经过时。不知道为什么Firefox仍然使用它们，但Chrome并没有。 – 2014-08-28 11:54:30

尽管我会考虑使用定位的“a”标签，因为移动设备上的图像映射可能存在问题......您的网页如何工作非常狭窄？你会更喜欢罗马尼亚的地图而不是罗马尼亚的地图吗？ – Ruskin 2014-08-28 13:02:33

与“区域”标签尝试过工作，但没有工作，因为我忘了改在弹出的JavaScript文件的东西。现在一切都好。关于狭窄桌面上的网站，嗯，列表看起来很好，但我会看看组织的其他成员怎么看待它，因为他们长期以来一直想要这样的表示（罗马尼亚的地图与参与该组织的城市）。

来源

2014-08-28 13:09:09

Anchor标记的热点属性在Chrome中不起作用

回答

相关问题