CODEWITHSUNDEEP
htmlinternet-explorer
Stan
Stan

Reputation: 26511

Polygon image map not working on IE

I have map with multiple polygons, it works just fine on FF and Chrome but not on IE. Why is that and how can I fix this?

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

Fiddle: http://jsfiddle.net/c4EQD/

As you can see if you move your mouse around image it shows clickable items, not so much on IE.

Upvotes: 0

Views: 1416

Answers (1)

Dai
Dai

Reputation: 155145

The HTML5 specification states:

An image, in the form of an img element or an object element representing an image, may be associated with an image map (in the form of a map element) by specifying a usemap attribute on the img or object element. The usemap attribute, if specified, must be a valid hash-name reference to a map element.

...which means you need:

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

When I do that, it works for me.

Upvotes: 3

Related Questions