Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 203
Laguna Avatar asked Nov 05 '22 14:11

Laguna


1 Answers

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!

like image 64
Dave Avatar answered Nov 14 '22 20:11

Dave