Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 31.05.2017, 15:15   #1
Мурад_П
Новичок
Джуниор
 
Регистрация: 31.05.2017
Сообщений: 1
Сообщение Cъезжают координаты на карте изображений

Добрый день, для сайта необходима карта изображений. Собрал координаты на одном из генераторов карт в интернете.
Все нормально вроде, но...при изменении размеров изображения координаты автоматически не меняются, а съезжают и области где должны быть ссылки на карте соответственно неверные. Подскажите как закрепить координаты
код следующий

Код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-fckeditor-plugin.googlecode.com/svn/trunk/jquery.MetaData.js"></script>
<script type="text/javascript" src="https://rawgithub.com/kemayo/maphilight/dd84221dec229fa5525760a1c791eb9e08f20dd3/jquery.maphilight.min.js"></script>
<script>$(function() {$("img[usemap]").maphilight();});</script>



<img alt="cb4993552efb1a4d95eeb2eb53f40707.jpg" src="http://htmlmapgenerator.ru/upload/cb4993552efb1a4d95eeb2eb53f40707.jpg" usemap="#myMap" width="1412" height="1012" />
<map name="myMap" id="myMap">
<area shape="poly" coords="1071,345,1095,349,1110,355,1121,355,1136,3 55,1147,357,1161,351,1169,349,1181,344,1186,342,11 91,350,1196,359,1205,365,1214,364,1222,367,1229,37 1,1237,385,1247,392,1259,405,1261,417,1266,429,126 4,436,1255,425,1250,414,1226,410,1221,410,1209,407 ,1199,407,1189,415,1176,415,1166,417,1157,410,1152 ,410,1142,417,1139,425,1126,431,1120,437,1105,446, 1094,452,1085,459,1074,460,1066,447,1057,425,1052, 406,1052,389,1055,376,1060,362,1065,351" alt="Baku Absheron" class="{fill:true,fillColor:'00ff00',fillOpacity:0 .4,stroke:true,strokeColor:'330066',strokeOpacity: 0.8,strokeWidth:1}" href="https://www.google.az" target="_self" title="Baku Absheron"/>
<area shape="poly" coords="341,327,369,329,381,322,395,321,415,321,42 5,321,441,326,457,328,482,339,490,353,490,367,482, 389,470,408,464,419,446,437,435,441,404,441,380,44 1,357,441,342,434,315,419,296,411,292,381,295,354, 307,337,325,332" alt="Ganjabasar" class="{fill:true,fillColor:'00ff00',fillOpacity:0 .4,stroke:true,strokeColor:'330066',strokeOpacity: 0.8,strokeWidth:1}" href="https://www.google.az" target="_self" title="Ganjabasar"/>
<area shape="poly" coords="597,420,642,410,677,410,697,414,725,420,74 4,437,757,452,766,471,767,490,765,507,750,529,721, 530,689,530,662,524,629,514,592,501,577,485,565,45 4,569,430,586,422" alt="Shirvan" class="{fill:true,fillColor:'00ff00',fillOpacity:0 .4,stroke:true,strokeColor:'330066',strokeOpacity: 0.8,strokeWidth:1}" href="https://www.google.az" target="_self" title="Shirvan"/>
<area shape="poly" coords="830,727,876,732,907,744,962,772,975,780,96 4,812,955,817,955,839,951,856,950,879,956,899,961, 916,964,937,970,959,970,975,970,987,957,995,946,10 07,940,1011,929,1011,912,1006,900,996,891,986,881, 979,874,965,869,957,861,959,847,961,842,961,834,95 2,824,939,822,931,814,926,799,920,781,912,770,901, 759,892,759,882,769,875,779,877,782,867,791,865,80 6,864,815,857,817,855,829,847,832,841,837,832,835, 822,826,816,821,815,817,812,812,807,805,802,804,79 7,799,791,794,792,789,790,786,780,782,771,789,767, 794,761,797,756,802,751,812,750,817,747,821,744,82 6,739,831,732" alt="Lankaran Masalli" class="{fill:true,fillColor:'00ff00',fillOpacity:0 .4,stroke:true,strokeColor:'330066',strokeOpacity: 0.8,strokeWidth:1}" href="https://www.google.az" target="_self" title="Lankaran Masalli"/>
<area shape="poly" coords="581,210,564,240,546,249,522,243,507,243,47 4,243,457,226,437,215,426,211,411,201,404,196,389, 185,370,176,362,169,346,160,335,153,326,143,324,13 5,324,129,315,124,302,118,297,110,296,99,296,83,30 1,79,317,76,330,70,332,59,335,48,340,41,349,39,362 ,40,376,50,385,58,384,64,391,58,405,58,412,56,419, 51,425,55,429,71,434,80,437,86,454,84,466,99,470,1 05,474,116,479,126,484,126,489,119,491,115,497,113 ,505,115,510,134,521,151,525,160,531,169,532,181,5 44,196,559,201,579,208" alt="Sheki Gakh" class="{fill:true,fillColor:'00ff00',fillOpacity:0 .4,stroke:true,strokeColor:'330066',strokeOpacity: 0.8,strokeWidth:1}" href="https://www.google.az" target="_self" title="Sheki Gakh"/>
<area shape="poly" coords="712,124,716,119,724,116,742,109,759,94,780 ,87,789,67,794,48,804,33,819,17,827,9,845,18,854,2 9,864,42,880,59,905,91,930,118,950,152,961,169,964 ,189,966,202,920,203,882,202,835,189,812,183,772,1 81,747,174,725,147,716,141" alt="Quba Khacmaz" class="{fill:true,fillColor:'00ff00',fillOpacity:0 .4,stroke:true,strokeColor:'330066',strokeOpacity: 0.8,strokeWidth:1}" href="https://www.google.az" target="_self" title="Quba Khacmaz"/>
<area shape="poly" coords="11,685,37,678,41,682,61,673,71,662,85,662, 96,677,104,688,106,698,107,713,111,717,117,709,124 ,707,125,705,137,712,136,719,137,725,155,730,157,7 40,169,740,179,734,192,722,204,718,210,715,220,709 ,227,709,239,712,249,725,254,744,250,763,249,775,2 64,778,285,787,295,795,296,815,299,824,304,839,315 ,853,320,875,329,884,336,899,336,909,321,913,306,9 13,289,909,282,914,259,903,226,897,215,897,206,888 ,191,889,174,888,174,875,174,867,161,862,150,852,1 34,839,120,832,106,828,100,823,99,812,92,798,82,77 8,66,769,54,764,51,745,46,734,41,724,37,715,21,712 ,21,705" alt="Nakhcivan" class="{fill:true,fillColor:'00ff00',fillOpacity:0 .4,stroke:true,strokeColor:'330066',strokeOpacity: 0.8,strokeWidth:1}" href="https://www.google.az" target="_self" title="Nakhcivan"/>
</map>

Последний раз редактировалось Вадим Мошев; 31.05.2017 в 21:37.
Мурад_П вне форума Ответить с цитированием
Старый 01.06.2017, 19:57   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Обычно легко обхожусь без имидж-карты, ибо старье малоюзабельное, обычными дивами: пример, отлично подходит для прямоугольничков, кругляшков, трапеций, и... ну, от скилла и фантазии зависит...
Но поскольку у тебя сложные полигоны, то я бы тупо перегнал их в проценты и зафигачил через SVG.

Как альтернативный вариант: скейлить скриптом через transform карту в зависимости от картинки. ХЗ поможет ли.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как пересчитать координаты точки диаграммы в координаты экрана. alex77755 Microsoft Office Excel 3 19.05.2017 13:32
WPF + C# Подгрузка изображений в память, без блокирования файлов изображений fezilk25 C# (си шарп) 0 02.01.2014 11:28
Даны координаты трёх точек, являющихся вершинами некоторого параллелограмма. Найти координаты четвертой вершины. yamato_pm Паскаль, Turbo Pascal, PascalABC.NET 1 18.12.2013 19:42
сегментация изображений на фотке (карте) Piv_drotik Свободное общение 0 24.10.2011 11:51