I have an image map of Europe, and I have 8 polygon shapes outlining some countries. Some of these shapes contain many points. My goal is to be able to click on each of the 8 countries. My code works great in Internet explorer 5.5, and I'm trying to get it to work in Netscape 6 as well, but many of my polygon points are skewed in Netscape 6. My code looks like this:<br />
<br />
<IMG alt="Map of Europe" src=http://www.htmlforums.com/archive/index.php/"maps/europe-map.gif"<br />
width="580" height="480" usemap="#euromap"><br />
<map id="euromap" name="euromap"><br />
<br />
<area shape=poly coords="100,210, 90,225, 110,225, 110,275, 170,270, 170,150,100,160" alt="UK" href=http://www.htmlforums.com/archive/index.php/"UK.htm"><br />
.<br />
.<br />
. similar code for the other polygons.<br />
<br />
When I click on the this polygon, I can see that some of the polygon points appear in the correct place, but some do not. Some of the points appear at the very left of the entire map of Europe, and some at the very top.<br />
<br />
It may also be of importance to note that this image map lies in one big table cell. <br />
<br />
Anyone have any suggestions?<br />
Thanks!<!--content-->Hey Bort, it will really be helpful if you added the link to your thread, I'ts pretty hard to get a grasp on your problem without it, by the way welcome to htmlforums... jaeman
<!--content-->Sorry, I'm new here and I'm not sure what you mean by adding a link to my thread. There is no URL yet for my page, but I could post more code if that's what you mean.<!--content-->if you can upload the page and provide a link to it, we can see if the image map coding is really at fault or something else and so forth. it just makes it a lot easier for other people with different browsers to try it out too.<!--content-->Are you raw coding the image map? It may be much easier if you make the image map in a program like paint shop pro or photoshop.<!--content-->I know that it might be easier to code in Paintshop Pro, or some other program, but this is really the only imagemap that I have, and it wouldn't really be worthwhile to purchase such a program. I think there could be an easier solution, because my code works fine with IE 5.5, so it should just be a cross browser issue. Here is some more detailed code... and I'm fairly certain that the code that I have not included (it is quite lengthy) is not to blame. I'll try to provide a link soon. <br />
<br />
<br />
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><br />
<TBODY><br />
<TD width=1 bgColor=#665744></TD><br />
<TD width=5 bgColor=#F0F8FF></TD><br />
<TD width=1 bgColor=#665744></TD><br />
<TD width=620 bgColor=#F0F8FF><br />
<FONT face=arial size=2><B>Hydraulika International currently has distributors in the<br />
following countries</B><BR><I>Click on a country for more information<I></FONT><br />
<IMG alt="Map of Europe" src=http://www.htmlforums.com/archive/index.php/"maps/europe-map.gif"<br />
width="580" height="480" usemap="#euromap"><br />
<map id="euromap" name="euromap"><br />
<area shape=poly coords="100,210, 90,225, 110,225,110,275, 170,270, 170,150,<br />
100,160" alt="UK" <br />
href=http://www.htmlforums.com/archive/index.php/"UK.htm"><br />
<area shape=poly coords="220,215, 210,280, 230,295, 220,310 273,310, 273,303,<br />
281,298, 270,285, 267,275 290,265, 285,215" alt="Germany"<br />
href=http://www.htmlforums.com/archive/index.php/"germany.htm"><br />
<area shape=poly coords="220,310, 205,327, 213,323, 214,332, 224,332, 229,326,<br />
231,333, 238,333, 242,310" alt="Switzerland"<br />
href=http://www.htmlforums.com/archive/index.php/"switzerland.htm"><br />
<area shape=poly coords="285,215, 290,265, 307,278, 309,274, 330,285 363,290, 373,265,<br />
368,223" alt="Poland" href=http://www.htmlforums.com/archive/index.php/"poland.htm"><br />
<area shape=poly coords="267,275, 270,285, 281,298, 287,298, 291,293, 310,294,<br />
330,285, 309,274, 307,278, 290,265" alt="Czech Republic"<br />
href=http://www.htmlforums.com/archive/index.php/"czech.htm"><br />
<area shape=poly coords="246,312, 246,318, 258,316, 265,321 287,324, 301,318, 308,306,<br />
308,295, 290,291, 287,298, 275,298, 273,305" <br />
alt="Austria" <br />
href=http://www.htmlforums.com/archive/index.php/"austria.htm"><br />
<area shape=poly coords="276,324, 276,335, 291,335, 304,322, 303,316, 290,322"<br />
alt="Slovenia" href=http://www.htmlforums.com/archive/index.php/"slovenia.htm"><br />
<area shape=poly coords="330,285, 307,294, 314,308, 325,308, 326,304, 345,296,<br />
359,300, 361,289"<br />
alt="Slovakia" href=http://www.htmlforums.com/archive/index.php/"slovakia.htm"><br />
<area shape=poly coords="310,305, 303,318, 306,322, 316,332, 346,328, 355,310, 363,304,<br />
344,297, 320,308"<br />
alt="Hungary" href=http://www.htmlforums.com/archive/index.php/"hungary.htm"><br />
<area shape=poly coords="375,0, 420,105, 395,195, 515,310, 515,370, 580,370, 580,0"<br />
alt="Russia" href=http://www.htmlforums.com/archive/index.php/"russia.htm"><br />
</map><br />
</TBODY><br />
</TABLE><!--content-->you don't have to purchase anything, go Download <!--more--> a trial with all of the features.<br />
<br />
<!-- w --><a class="postlink" href="http://www.adobe.com">www.adobe.com</a><!-- w --><br />
<!-- w --><a class="postlink" href="http://www.jasc.com">www.jasc.com</a><!-- w --><!--content-->Here is a link to a test page. <br />
<br />
<!-- m --><a class="postlink" href="http://www.hydraulika.cz/brandon/distributors.htm">http://www.hydraulika.cz/brandon/distributors.htm</a><!-- m --> <br />
<br />
I think all browsers will outline the polygon when you hold down the left mouse button, but I'm not sure.<!--content-->Seems to work fine in NS7, I need to dload a copy of NS6 to check it, Got a link..? jaeman<!--content-->You can get a copy of navigator 6.1 at<br />
<!-- m --><a class="postlink" href="http://wp.netscape.com/Download">http://wp.netscape.com/Download</a><!-- m --> <!--more-->/archive.html<br />
<br />
I'm thinking maybe it was a problem they fixed in 6.2?<!--content-->i'll dload a copy & have a look with it... jaeman<!--content-->it looks good to me in all broswers I have tried it on.<br />
but what do you mean by this<br />
When I click on the this polygon, I can see that some of the polygon points appear in the correct place<br />
you can see what polygon points? you mean the outline of the image?<!--content-->I have figured it out!<br />
<br />
For some reason in Netscape 6.1 you must keep all coordinates on the same line. So this polygon will not work:<br />
<br />
<area shape=poly coords="285,215, 290,265, 307,278,309,274, 330,285 363,290, <br />
373,265, 368,223" alt="Poland" href=http://www.htmlforums.com/archive/index.php/"poland.htm"><br />
<br />
but this one will:<br />
<br />
<area shape=poly coords="285,215, 290,265, 307,278,309,274, 330,285 363,290, 373,265,368,223" alt="Poland" href=http://www.htmlforums.com/archive/index.php/"poland.htm"><br />
<br />
It makes it kind of inconvenient, because I like to have all of my code in one window without the need to scroll right, but I'd rather have it working.<br />
<br />
Thanks for all your replies!<!--content-->that si funny becasue when i viewed it in NS6.x it worked just fine. new lines shouldn't have any worries. but it could make some since.<!--content-->
<br />
<IMG alt="Map of Europe" src=http://www.htmlforums.com/archive/index.php/"maps/europe-map.gif"<br />
width="580" height="480" usemap="#euromap"><br />
<map id="euromap" name="euromap"><br />
<br />
<area shape=poly coords="100,210, 90,225, 110,225, 110,275, 170,270, 170,150,100,160" alt="UK" href=http://www.htmlforums.com/archive/index.php/"UK.htm"><br />
.<br />
.<br />
. similar code for the other polygons.<br />
<br />
When I click on the this polygon, I can see that some of the polygon points appear in the correct place, but some do not. Some of the points appear at the very left of the entire map of Europe, and some at the very top.<br />
<br />
It may also be of importance to note that this image map lies in one big table cell. <br />
<br />
Anyone have any suggestions?<br />
Thanks!<!--content-->Hey Bort, it will really be helpful if you added the link to your thread, I'ts pretty hard to get a grasp on your problem without it, by the way welcome to htmlforums... jaeman
<!--content-->Sorry, I'm new here and I'm not sure what you mean by adding a link to my thread. There is no URL yet for my page, but I could post more code if that's what you mean.<!--content-->if you can upload the page and provide a link to it, we can see if the image map coding is really at fault or something else and so forth. it just makes it a lot easier for other people with different browsers to try it out too.<!--content-->Are you raw coding the image map? It may be much easier if you make the image map in a program like paint shop pro or photoshop.<!--content-->I know that it might be easier to code in Paintshop Pro, or some other program, but this is really the only imagemap that I have, and it wouldn't really be worthwhile to purchase such a program. I think there could be an easier solution, because my code works fine with IE 5.5, so it should just be a cross browser issue. Here is some more detailed code... and I'm fairly certain that the code that I have not included (it is quite lengthy) is not to blame. I'll try to provide a link soon. <br /><br />
<br />
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><br />
<TBODY><br />
<TD width=1 bgColor=#665744></TD><br />
<TD width=5 bgColor=#F0F8FF></TD><br />
<TD width=1 bgColor=#665744></TD><br />
<TD width=620 bgColor=#F0F8FF><br />
<FONT face=arial size=2><B>Hydraulika International currently has distributors in the<br />
following countries</B><BR><I>Click on a country for more information<I></FONT><br />
<IMG alt="Map of Europe" src=http://www.htmlforums.com/archive/index.php/"maps/europe-map.gif"<br />
width="580" height="480" usemap="#euromap"><br />
<map id="euromap" name="euromap"><br />
<area shape=poly coords="100,210, 90,225, 110,225,110,275, 170,270, 170,150,<br />
100,160" alt="UK" <br />
href=http://www.htmlforums.com/archive/index.php/"UK.htm"><br />
<area shape=poly coords="220,215, 210,280, 230,295, 220,310 273,310, 273,303,<br />
281,298, 270,285, 267,275 290,265, 285,215" alt="Germany"<br />
href=http://www.htmlforums.com/archive/index.php/"germany.htm"><br />
<area shape=poly coords="220,310, 205,327, 213,323, 214,332, 224,332, 229,326,<br />
231,333, 238,333, 242,310" alt="Switzerland"<br />
href=http://www.htmlforums.com/archive/index.php/"switzerland.htm"><br />
<area shape=poly coords="285,215, 290,265, 307,278, 309,274, 330,285 363,290, 373,265,<br />
368,223" alt="Poland" href=http://www.htmlforums.com/archive/index.php/"poland.htm"><br />
<area shape=poly coords="267,275, 270,285, 281,298, 287,298, 291,293, 310,294,<br />
330,285, 309,274, 307,278, 290,265" alt="Czech Republic"<br />
href=http://www.htmlforums.com/archive/index.php/"czech.htm"><br />
<area shape=poly coords="246,312, 246,318, 258,316, 265,321 287,324, 301,318, 308,306,<br />
308,295, 290,291, 287,298, 275,298, 273,305" <br />
alt="Austria" <br />
href=http://www.htmlforums.com/archive/index.php/"austria.htm"><br />
<area shape=poly coords="276,324, 276,335, 291,335, 304,322, 303,316, 290,322"<br />
alt="Slovenia" href=http://www.htmlforums.com/archive/index.php/"slovenia.htm"><br />
<area shape=poly coords="330,285, 307,294, 314,308, 325,308, 326,304, 345,296,<br />
359,300, 361,289"<br />
alt="Slovakia" href=http://www.htmlforums.com/archive/index.php/"slovakia.htm"><br />
<area shape=poly coords="310,305, 303,318, 306,322, 316,332, 346,328, 355,310, 363,304,<br />
344,297, 320,308"<br />
alt="Hungary" href=http://www.htmlforums.com/archive/index.php/"hungary.htm"><br />
<area shape=poly coords="375,0, 420,105, 395,195, 515,310, 515,370, 580,370, 580,0"<br />
alt="Russia" href=http://www.htmlforums.com/archive/index.php/"russia.htm"><br />
</map><br />
</TBODY><br />
</TABLE><!--content-->you don't have to purchase anything, go Download <!--more--> a trial with all of the features.<br />
<br />
<!-- w --><a class="postlink" href="http://www.adobe.com">www.adobe.com</a><!-- w --><br />
<!-- w --><a class="postlink" href="http://www.jasc.com">www.jasc.com</a><!-- w --><!--content-->Here is a link to a test page. <br />
<br />
<!-- m --><a class="postlink" href="http://www.hydraulika.cz/brandon/distributors.htm">http://www.hydraulika.cz/brandon/distributors.htm</a><!-- m --> <br />
<br />
I think all browsers will outline the polygon when you hold down the left mouse button, but I'm not sure.<!--content-->Seems to work fine in NS7, I need to dload a copy of NS6 to check it, Got a link..? jaeman<!--content-->You can get a copy of navigator 6.1 at<br />
<!-- m --><a class="postlink" href="http://wp.netscape.com/Download">http://wp.netscape.com/Download</a><!-- m --> <!--more-->/archive.html<br />
<br />
I'm thinking maybe it was a problem they fixed in 6.2?<!--content-->i'll dload a copy & have a look with it... jaeman<!--content-->it looks good to me in all broswers I have tried it on.<br />
but what do you mean by this<br />
When I click on the this polygon, I can see that some of the polygon points appear in the correct place<br />
you can see what polygon points? you mean the outline of the image?<!--content-->I have figured it out!<br />
<br />
For some reason in Netscape 6.1 you must keep all coordinates on the same line. So this polygon will not work:<br />
<br />
<area shape=poly coords="285,215, 290,265, 307,278,309,274, 330,285 363,290, <br />
373,265, 368,223" alt="Poland" href=http://www.htmlforums.com/archive/index.php/"poland.htm"><br />
<br />
but this one will:<br />
<br />
<area shape=poly coords="285,215, 290,265, 307,278,309,274, 330,285 363,290, 373,265,368,223" alt="Poland" href=http://www.htmlforums.com/archive/index.php/"poland.htm"><br />
<br />
It makes it kind of inconvenient, because I like to have all of my code in one window without the need to scroll right, but I'd rather have it working.<br />
<br />
Thanks for all your replies!<!--content-->that si funny becasue when i viewed it in NS6.x it worked just fine. new lines shouldn't have any worries. but it could make some since.<!--content-->