Image map area poly certain coords Firefox doesn't work, IE works

问题

I've got a problem with image map HTML.

Working example with no style and no js on: http://www.download.lagunawebdesign.pl/bug/

<img src="http://www.download.lagunawebdesign.pl/bug/Bez-nazwy-2.png" width="242" height="347"  alt="Planets" usemap="#planetmap" />

<map id="planetmap" name="planetmap">
    <area shape="poly" coords="31,37,31,68,47,68,47,54,51,54,51,38" title="1" alt="" href="#" />
    <area shape="poly" coords="29,48,23,47,23,42,6,42,6,57,13,58,15,67,31,66,30,49" title="2" alt="" href="#" />
    <area shape="poly" coords="32,99,31,131,46,131,47,117,51,116,51,99" title="3" alt="" href="#" />
    <area shape="poly" coords="32,163,32,196,46,194,46,180,51,180,52,164,31,163,31,196,47,195,46,180,52,180,52,163" title="4" alt="doesnt work" href="#" />
    <area shape="poly" coords="32,227,31,258,47,259,47,245,52,245,52,227" title="5" alt="" href="#" />
    <area shape="poly" coords="121,297,121,316,153,317,153,302,139,301,139,296" title="6" alt="" href="#" />
    <area shape="poly" coords="190,209,191,226,210,227,211,195,195,195,196,209" title="7" alt="" href="#" />
    <area shape="poly" coords="5,17,5,0,51,0,51,18" title="8" alt="" href="#" />
</map>  

Only fourth area doesnt work properly. On Firefox or Opera is not clickable, Firebug shows good area, but on hover cursor doesnt change (only really small peace close to area on the right side is clickable). On IE works fine. I really do not know how to fix it.

All coords are putted by customer in CMS, some coords doesnt work (like 3/500).

回答1:

Looks to me that there are just too many coords in the fourth area. I tried coords="32,163,31,196,46,194,46,180,51,180,52,164" and it seemed to work for me in Firefox and Opera. Hope this helps!

回答2:

Just change 164,31,163,31 to 164,31. It will looks almost same, but it's works.

来源：https://stackoverflow.com/questions/7395606/image-map-area-poly-certain-coords-firefox-doesnt-work-ie-works