Координаты курсора над слоем
- определяем и отслеживаем положение слоя с картой в окне браузера.
- отслеживаем координаты курсора мыши, и, когда курсор перемещается над слоем с картой, перемещаем вместе с ним точку и показываем ее координаты.
- при клике оставляем в месте клика точку другого цвета и записываем ее координаты.
пример работы скрипта:
пример html-кода:
<style type="text/css">
#mapForm label { width: 170px; text-align: right; margin: 0 10px 0 0; }
#mapForm input { width: 60px; background: #fff; border: none; }
#mapForm div { width: 452px; height: 340px; background: url(article/scheme.png) no-repeat 0 0; position: relative; }
#mapForm div img { width: 10px; height: 10px; display: none; position: absolute; }
</style>
<form action="" method="get" id="mapForm">
<label for="coordX">X:</label>
<input type="text" name="coordX" />
<label for="coordXfix">X-координата:</label>
<input type="text" name="coordXfix" id="coordXfix" value="" /><br />
<label for="coordY">Y:</label>
<input type="text" name="coordY" />
<label for="coordYfix">Y-координата:</label>
<input type="text" name="coordYfix" id="coordYfix" value="" />
<div id="schemePlace">
<img src="article/magDot2.gif" alt="" id="magDot2" />
<img src="article/magDot0.gif" alt="" id="magDot" />
</div>
</form>
<script type="text/javascript">
function getCoords() // вызывается при перемещении курсора над слоем с картой координаты слоя с картой в окне браузера
{
imageMapX = findPosX(imageMap);
imageMapY = findPosY(imageMap);
imageMap.onmousemove = moveDot;
imageMap.onmouseout = function () // точку надо убирать, если курсор покинул слой с картой
{
myDot.style.display = "none";
};
imageMap.onclick = coordsFix; // координаты точки надо запомнить
}
function coordsFix() // функция фиксирует координаты точки при клике
{
myForm.coordXfix.value = myForm.coordX.value; // координата X
myForm.coordYfix.value = myForm.coordY.value; // координата Y
myDot2.style.display = "block"; // точка показывается
myDot2.style.left = myForm.coordX.value + "px"; // и позициоируется
myDot2.style.top = myForm.coordY.value + "px";
}
function moveDot(cursor) // функция перемещения точки над слоем с картой
{
myDot.style.display = "block"; // точку надо показать
if (!cursor) var cursor = window.event;
myForm.coordX.value = "";
myForm.coordY.value = "";
var x = 0;
var y = 0;
if (cursor.pageX || cursor.pageY)
{
x = cursor.pageX;
y = cursor.pageY;
}
else if (cursor.clientX || cursor.clientY)
{
x = cursor.clientX + document.body.scrollLeft;
y = cursor.clientY + document.body.scrollTop;
}
x -= imageMapX;
y -= imageMapY;
x -= dX;
y -= dY;
// для наглядности координаты точки показываются во временых полях формы справа "X" и "Y"
(x < 0) ? myForm.coordX.value = 0 : myForm.coordX.value = x;
(y < 0) ? myForm.coordY.value = 0 : myForm.coordY.value = y;
// если курсор не покинул слой с картой, точка перемещается с курсором
if (x > 0 && y > 0 && x < mapWdt && y < mapHgt)
{
myDot.style.left = x + "px";
myDot.style.top = y + "px";
}
}
function getObj(name) // функция захвата объекта, используется при инициализации
{
if (document.getElementById) return document.getElementById(name);
else if (document.all) return document.all[name];
else if (document.layers) return document.layers[name];
else return false;
}
function findPosX(obj) // X-координата слоя
{
var currleft = 0;
if (obj.offsetParent)
while (obj.offsetParent)
{
currleft += obj.offsetLeft
obj = obj.offsetParent;
}
else if (obj.x) currleft += obj.x;
return currleft;
}
function findPosY(obj) // Y-координата слоя
{
var currtop = 0;
if (obj.offsetParent)
while (obj.offsetParent)
{
currtop += obj.offsetTop
obj = obj.offsetParent;
}
else if (obj.y) currtop += obj.y;
return currtop;
}
function init() // инициализация
{
dX = 7; // смещение для точки
dY = 7;
myForm = getObj("mapForm"); // форма
imageMap = getObj("schemePlace"); // слой с картой
imageMap.onmouseover = getCoords;
// ширина и высота слоя - смещение чтобы точка за пределы картинки даже не думала уходить
mapWdt = imageMap.offsetWidth - dX;
mapHgt = imageMap.offsetHeight - dY;
myDot = getObj("magDot"); // точки
myDot2 = getObj("magDot2");
}
try // ожидание загрузки страницы и вызов функции инициализации
{
window.addEventListener("load", init, false);
}
catch(e)
{
window.onload = init;
}
</script>
просмотров: 2222
