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中不起作用

回答

相關問題