Question

我有多个多边形的地图，它在FF和Chrome上运行得很好但在IE上却没有。为什么这样，我该如何解决这个问题？

<img src="img/global/map-overlay.gif" width="1024" height="768" usemap="map" border="0" style="margin-top: -54px;" />
<map name="map">
    <area shape="poly" coords="259,145,336,190,333,279,260,323,186,280,178,189" href="#win-more-business" />
    <area shape="poly" coords="428,146,506,189,507,276,430,320,357,279,354,187" href="#coordinate-multiple-disciplines" />
    <area shape="poly" coords="597,148,672,190,672,279,597,321,520,279,516,192" href="#streamline-workflows" />
    <area shape="poly" coords="766,146,842,193,843,275,768,323,685,279,690,192" href="#efficiently-manage-project-information" />
    <area shape="poly" coords="174,295,251,338,254,425,173,471,98,428,98,340" href="video_asset_view.html" />
    <area shape="poly" coords="348,293,421,339,420,426,343,472,269,428,266,336" href="#bim-for-electrict-infrastructure" />
    <area shape="poly" coords="601,339,680,294,756,335,757,423,680,470,601,424" href="#bim-for-infrastructure" />
    <area shape="poly" coords="773,336,850,294,927,336,928,427,851,471,773,426" href="#bim-for-construction" />
    <area shape="poly" coords="181,486,258,442,332,483,334,573,258,617,180,571" href="#increasing-client-satisfaction" />
    <area shape="poly" coords="427,442,502,485,505,574,426,618,351,573,347,482" href="#greater-efficiency-across-the-lifecycle" />
    <area shape="poly" coords="596,440,671,482,673,571,596,618,518,572,521,480" href="#improved-workflow-productivity" />
    <area shape="poly" coords="688,479,762,435,843,482,845,569,765,615,686,571" href="graph_asset_view.html" />
    <area shape="poly" coords="937,624,982,650,980,694,940,716,900,697,902,648" class="disableOnIframe" href="home.html" />
</map>

小提琴：http://jsfiddle.net/c4EQD/

正如您所看到的，如果您将鼠标移动到图像周围，它会显示可点击的项目，而不是IE。

Answer 1

The HTML5 specification states：

以img元素或表示图像的对象元素的形式的图像可以通过在img或对象元素上指定usemap属性与图像映射（以地图元素的形式）相关联。 usemap属性（如果已指定）必须是对地图元素的有效哈希名称引用。

...这意味着你需要：

<img src="img/global/map-overlay.gif" width="1024" height="768" usemap="#map" style="margin-top: -54px; border: none;" />

当我这样做时，它对我有用。

多边形图像映射不适用于IE

1 个答案: