Как запрограммировать изменение координат областей графической карты
- Подробности
- Категория: Программирование
- Просмотров: 1960
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 передачу параметров функции по ссылке (т.е. чтобы программа помнила измененные координаты при многократном вызове функции), пришлось дописать последние четыре строчки, в которых массиву присваиваются новые координаты.