0

I am trying to build a responsive map. I created the clickable areas using an online tool, producing this:

                    <img src="img/kosmosMap.jpg" usemap="#image-map">
                    <map style="cursor: pointer" name="image-map">
                        <area onclick="webInput2('voreia_ameriki')" target="" alt="1" title="1" coords="369,344,345,328,335,313,319,309,310,298,301,302,270,288,266,273,259,260,253,271,231,222,224,190,245,161,243,111,220,102,195,110,186,118,145,125,161,109,169,94,180,84,206,67,235,57,299,64,343,57,366,44,390,50,422,47,454,43,466,26,482,21,511,18,560,17,585,21,627,17,669,19,684,25,666,31,654,48,648,63,627,73,613,73,582,86,563,107,540,92,553,63,540,44,502,39,489,50,511,65,516,82,496,96,502,118,514,130,514,155,496,165,441,181,411,196,406,213,381,228,395,252,412,268,424,284,454,289,464,322,448,328,361,302" shape="poly">
                        <area onclick="webInput2('notia_ameriki')" target="" alt="2" title="2" coords="474,622,456,621,436,604,427,589,424,579,419,560,416,546,412,504,408,462,378,435,366,404,356,385,365,367,372,345,381,322,398,314,454,330,461,341,486,345,494,367,550,391,561,403,544,431,533,477,511,484,504,506,487,535,469,556,458,577,502,605" shape="poly">
                        <area onclick="webInput2('notia_ameriki')" target="" alt="2" title="2" coords="68,290,74,277,61,264,46,266" shape="poly">
                        <area onclick="webInput2('eurwpi')" target="" alt="3" title="3" coords="897,195,855,179,837,169,813,174,813,189,805,203,808,219,791,216,782,196,771,195,758,214,740,196,715,196,699,204,674,208,665,202,667,171,692,173,692,158,667,140,671,123,694,110,709,131,732,127,726,112,723,94,775,58,813,61,843,66,859,61,884,39,911,40,884,56,917,70,905,82,912,116,924,136,916,145,892,141,897,161,884,170" shape="poly">
                        <area onclick="webInput2('eurwpi')" target="" alt="3" title="3" coords="646,93,632,85,654,75,671,85" shape="poly">
                        <area onclick="webInput2('eurwpi')" target="" alt="3" title="3" coords="754,48,784,43,790,28,737,29" shape="poly">
                        <area onclick="webInput2('afriki')" target="" alt="4" title="4" coords="679,210,653,237,628,273,629,311,627,319,640,329,665,356,716,348,730,377,746,404,753,420,746,452,753,475,776,534,817,527,837,498,850,481,891,495,912,436,901,424,858,473,847,465,871,444,868,403,872,386,907,350,916,316,884,319,861,285,840,245,830,228,805,227,784,220,776,229,750,216,741,200" shape="poly">
                        <area onclick="webInput2('asia')" target="" alt="5" title="5" coords="892,177,900,165,896,144,917,148,928,136,913,112,908,83,920,71,904,57,925,52,936,54,966,40,946,32,956,24,1000,35,1026,39,1038,50,1084,50,1099,62,1125,53,1159,58,1196,61,1230,65,1250,66,1294,73,1309,86,1293,91,1282,102,1262,107,1275,146,1260,145,1238,115,1241,103,1228,104,1222,112,1208,108,1188,111,1182,127,1199,129,1218,131,1235,159,1243,171,1255,176,1246,188,1255,217,1243,220,1222,236,1210,219,1197,218,1181,198,1179,211,1181,225,1192,243,1202,274,1185,273,1171,274,1208,291,1206,308,1219,311,1231,349,1239,368,1246,395,1219,424,1131,404,1095,345,1117,352,1108,337,1100,299,1091,302,1070,272,1060,279,1034,303,1033,327,1042,343,1034,350,1014,331,995,280,966,263,942,261,945,273,934,292,884,318,822,210,808,202,817,182,851,181,901,197" shape="poly">
                        <area onclick="webInput2('wkeania')" target="" alt="6" title="6" coords="1151,527,1159,516,1160,475,1179,463,1193,458,1218,435,1231,435,1252,425,1263,425,1268,432,1264,442,1276,448,1286,421,1269,406,1264,395,1248,390,1247,370,1263,377,1281,378,1317,395,1325,379,1373,413,1369,427,1331,404,1315,406,1334,424,1308,417,1297,419,1308,460,1327,491,1303,531,1277,549,1261,575,1248,566,1256,548,1243,541,1228,519,1208,521,1163,534" shape="poly">
                        <area onclick="webInput2('wkeania')" target="" alt="6" title="6" coords="1329,587,1401,546,1389,538,1382,526,1377,543,1317,580" shape="poly">
                        <area onclick="webInput2('wkeania')" target="" alt="6" title="6" coords="1382,477,1365,462,1372,454" shape="poly">
                        <area onclick="webInput2('wkeania')" target="" alt="6" title="6" coords="1398,439,1384,435,1389,456" shape="poly">
                        <area onclick="webInput2('wkeania')" target="" alt="6" title="6" coords="1426,457,1442,452,1431,442" shape="poly">
                        <area onclick="webInput2('antarktiki')" target="" alt="7" title="7" coords="343,754,274,725,314,709,374,702,411,701,437,698,477,705,507,670,535,662,542,667,532,677,537,691,553,709,594,717,620,719,644,710,679,696,703,691,741,689,771,691,795,688,829,685,883,675,899,680,935,684,955,679,975,676,1000,675,1022,667,1047,675,1080,675,1110,675,1133,671,1150,680,1181,685,1194,692,1213,698,1198,710,1172,717,1218,725,1166,726,1137,729,1133,737,1168,743,1144,752" shape="poly">
                    </map>

I have 2 issues:

  1. The rest of the picture (in this case, the sea) is clickable on both PC/laptop and mobile. This is especially bad on mobile because the image has a blue tint above it when clicked. If I use pointer-events: none then the image is indeed un-clickable on both PC/laptop and mobile, but the areas cannot be clicked too.
  2. When re-scaling the window, the picture was re-scaling as well, but the coords were not. I kind of fixed that by using this https://github.com/davidjbradshaw/image-map-resizer library after reading this Responsive image map solution. But the coords re-scaling happens only if the window gets re-scalled manually.

Please help oh HTML Gods.

the image i am using

Cain
  • 49
  • 6

0 Answers0