Javascript для изменения координат областей графической карты. Координаты меняются для областей прямоугольной формы.

Была у меня такая задача: пользователь кнопкой на странице изменяет размер объекта, объектом является графическая карта. Соответственно пришлось написать сценарий на JavaScript, который меняет координаты графической карты. Вот как я это сделал.

В html-коде карта задана так:

<img src="/dom.jpg" usemap="#md6" id="d6" name="nd6" alt="дом">

<map name="md6">
<area shape="rect" coords="0,0,50,50" href="javascript:processIncreaseHeight('d6',areaKoordD6)">
<area shape="rect" coords="50,0,100,50" href="javascript:processDecreaseHeight('d6',areaKoordD6)">
</map>

В теге <img> специально заданы атрибуты id и name, без name не работает. В тексте сценария на JavaScript задан массив координат (тех же, что и в теге area), переменная массива является параметром в функциях, вызываемых при нажатии на соответствующую область карты. Можно вызывать функции и по-другому, не суть. Это определение массива:

var areaKoordD6=[
[0,0,50,50],
[50,0,100,50]
];

Мои функции изменения размера объекта вызывают функцию ChangeAreas, которая изменяет координаты областей графической карты. Сценарий рассчитан на области прямоугольной формы (shape="rect") в том смысле, что меняется четыре координаты. Для другой формы нужно добавить новые или убрать лишние переменные x1,x2,y1,y2. Вызов функции выглядит так:

ChangeAreas(ElId,areaKoordD6);

Здесь ElId - значение атрибута id тега <img>. А вот код самой функции ChangeAreas:

function ChangeAreas(ElId,areaKoord)
{
var ElName = "m" + document.getElementById(ElId).id;
var maps = document.getElementsByName(ElName);
var areas = maps[0].getElementsByTagName("area");
var x1,y1,x2,y2;

for (var i = 0; i < areas.length; i=i+1)
{
x1 = areaKoord[i][0];
y1 = areaKoord[i][1];
x2 = areaKoord[i][2];
y2 = areaKoord[i][3];
y1=y1*2;
y2=y2*2;
areas[i].coords = "" + x1 + "," + y1 + "," + x2 + "," + y2;
areaKoordD6[i][0]=x1;
areaKoordD6[i][1]=y1;
areaKoordD6[i][2]=x2;
areaKoordD6[i][3]=y2;
}
}

Очевидно, что вместо ElId можно извне сразу получать значение ElName (ElName - значение атрибута usemap тега <img>), но мне удобнее было пользоваться значением id, потому что на самом деле объектов было несколько и преобразования с ними я совершал разные, и в других случаях мне нужен был именно id, поэтому и здесь я так сделал, чтобы добраться к координатам <area> через id тега <img>. Для этого я хитро обозвал атрибут usemap тега <img>: "md6" - это "m" + id (еще раз, дабы не листать привожу тег <img src="/dom.jpg" usemap="#md6" id="d6" name="nd6" alt="дом">).

Чтобы обойти неработающую в JavaScript передачу параметров функции по ссылке (т.е. чтобы программа помнила измененные координаты при многократном вызове функции), пришлось дописать последние четыре строчки, в которых массиву присваиваются новые координаты.

Добавить комментарий


Защитный код
Обновить

Комментарии  

WilliamTar
0 # WilliamTar 19.06.2018 03:53
Привет! Класный у вас сайт!
Что скажете по поводу этих новостей?:
http://energysmi.ru/news/15185-o-carskoy-dinastii-romanovyh-i-genetike.html О царской династии Романовых и генетике
http://energysmi.ru/news/11628-nelzya-progibatsya-pod-natiskom-pronacistskih-profashistskih-dvizheniy.html
http://energysmi.ru/news/2389-mrsk-centra-zavershila-razmeschenie-bondov-serii-bo-01-na-4-mlrd-rub.html
новости новороссии сегодня южный федерал карта боев на донбассе сегодня
Ответить | Сообщить модератору
Robertgef
0 # Robertgef 09.06.2018 06:12
Привет всем участникам!
Нашел удивительную фотосессию на этом сайте: http://agentmdk.ru :
http://agentmdk.ru/foto-prikoly-interesnoe/7796-podpolnye-staleliteynye-zavody-v-kitae.html Подпольные сталелитейные заводы в Китае
http://agentmdk.ru/foto-prikoly-interesnoe/3035-luchshie-fotografii-rossii.html Лучшие фотографии России
http://agentmdk.ru/foto-prikoly-interesnoe/2697-samye-populyarnye-poiskovye-zaprosy-proshlogo-goda-v-rossii.html
Ответить | Сообщить модератору
Larryfrauh
0 # Larryfrauh 09.06.2018 04:21
Привет всем! Класный у вас сайт!
Нашёл интересное в сети:
http://uptek.ru/information-technology-it/19914-v-seti-opublikovali-izobrazhenie-gde-budet-prohodit-shestaya-chast-gta.html В сети опубликовали изображение где будет проходить шестая часть GTA
http://uptek.ru/news/21114-est-cel-est-mechta-a-est-smysl-zhizni-rossiyskie-paralimpiycy-zhdut-dopuska-k-igram.html
http://uptek.ru/news/25853-shest-chelovek-pogibli-v-rezultate-vzryva-u-mecheti-v-kabule-voennyy-obozrevatel.html
Ещё много интересного по теме нашел тут: минюст лнр новости новороссии русская весна
Ответить | Сообщить модератору