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

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


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