jquery - 我无法在 Chrome 以外的任何其他程序中与 HTML map 交互？

Question

我有一个<map>放置在 <div> 上其中包含一些对滚动 <area> 使用react的元素其中的元素。

在 Dreamweaver 的“设计”界面中看起来像这样:

我的 map 使用 CSS 放置在实际图形上，如下所示:

img#dial-map
{
    position: absolute;
    z-index: 1000;
}

这是实际 map :

<img src="anatomy/view/dial/dial.png" id="dial-map" usemap="dial">
<map name="dial">
    <area id="click-ansible" shape="poly" coords="412,419,376,447,313,474,248,487,247,434,327,415,374,377" href="#">
    <area id="click-cadreon" shape="poly" coords="487,245,478,313,455,366,416,417,378,380,429,299,434,246" href="#">
    <area id="click-orion" shape="poly" coords="418,73,453,117,482,191,484,242,431,244,422,180,378,111" href="#">
    <area id="click-ensemble" shape="poly" coords="247,1,311,10,368,35,415,70,378,108,312,66,244,53" href="#">
    <area id="click-reprise" shape="poly" coords="73,69,111,39,176,8,242,2,243,53,172,66,112,108" href="#">
    <area id="click-magnaglobal" shape="poly" coords="245,487,186,481,114,450,71,417,110,377,175,423,246,432" href="#">
    <area id="click-airborne" shape="poly" coords="69,414,37,373,12,316,2,244,55,244,68,322,106,375" href="#">
    <area id="click-analytics" shape="poly" coords="2,242,11,171,33,120,71,74,109,109,70,168,54,241" href="#">
    <area id="click-mb3" shape="poly" coords="257,430,178,422,120,384,82,340,140,305,163,337,206,360,262,364,317,342,348,305,404,340,384,367,324,413" href="#">
    <area id="click-um" shape="poly" coords="307,134,245,116,246,56,309,68,375,109,418,178,430,237,429,288,404,339,350,303,368,246,358,198,344,169" href="#">
    <area id="click-initiative" shape="poly" coords="80,339,63,289,58,235,72,171,109,112,176,67,243,56,242,119,192,128,152,159,126,206,122,261,137,306" href="#">
</map>

dial.png是一个没有内容的PNG(完全透明的图像)。

然后，当我将鼠标悬停在每个 <area> 上时，我使用 JQuery 应用我想要的动画。 :

$("map area").each(function()
{
    $(this).mouseover(function()
    {
        // ...

    }).mouseout(function()
    {
        // ...

    });

});

<小时/>

Chrome 中一切正常，但当我在 Internet Exporer(8) 或 Firefox(7) 中尝试时没有任何反应。详细来说，没有发生任何事情包括以下内容:

1. 当我将鼠标悬停在这些区域上时，光标不会变为指针。
2. 我在 JQuery 中添加的在 Chrome 中运行的动画无法运行。
3. 点击这些区域不会执行任何操作(包括按预期向网址添加 #)。

我感觉问题出在 CSS 以及 map 在图形之上的定位。谁能明白为什么这不能按预期工作？

<小时/>

Demo link:
https://projectavian.com/files/mb/dial.html

Answer 1

尝试<img ..... usemap="#dial">