Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.08.2011, 17:08
Профессор
Отправить личное сообщение для Telnet Посмотреть профиль Найти все сообщения от Telnet
 
Регистрация: 21.02.2011
Сообщений: 160

Координаты курсора над блоком
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Координаты курсора над блоком</title>
</head>

<body>
<div style="margin:10%;">
	<div id="detect" style="background-color:#C69; height:150px; width:80%;"></div>

<label for="PosX">Координаты X<input id="PosX" name="PosX" type="text" /></label>
<label for="PosY">Координаты Y<input id="PosY" name="PosY" type="text" /></label>
</div>
</body>
</html>

Как определить положение курсора именно над блоком id="detect" и вывести полученные координаты в тестовые поля
как это сделать на Jquery я знаю, но нужно именно на JavaScript желательно кросс браузерно

Последний раз редактировалось Telnet, 23.08.2011 в 17:12.
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2011, 17:20
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

кстати, вопрос к ребятам : IE 9 в режиме имитации IE 7 .. его имитирует полностью ? или есть что-то отличающееся?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Координаты курсора над блоком</title>
</head>

<body>
<div style="margin:10%;">
    <div id="detect" style="background-color:#C69; height:150px; width:80%;"></div>

<label for="PosX">Координаты X<input id="PosX" name="PosX" type="text" /></label>
<label for="PosY">Координаты Y<input id="PosY" name="PosY" type="text" /></label>
</div>
</body>
</html>

<script type="text/javascript">
var x = document.getElementById("PosX"),
    y = document.getElementById("PosY"),
    el = document.getElementById("detect");

el.onclick = function(e){
    if(!e) e = event
*!*
    x.value = e.offsetX;
    y.value = e.offsetY;
*/!*
}
</script>

Последний раз редактировалось melky, 23.08.2011 в 17:23.
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2011, 17:38
Профессор
Отправить личное сообщение для Telnet Посмотреть профиль Найти все сообщения от Telnet
 
Регистрация: 21.02.2011
Сообщений: 160

не написал наверное нужно не поклику а отследивать место положение курсора, кажется mousemoove
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2011, 17:48
Профессор
Отправить личное сообщение для Telnet Посмотреть профиль Найти все сообщения от Telnet
 
Регистрация: 21.02.2011
Сообщений: 160

все спасибо пределал
el.onmousemove
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2011, 18:33
Профессор
Отправить личное сообщение для Telnet Посмотреть профиль Найти все сообщения от Telnet
 
Регистрация: 21.02.2011
Сообщений: 160

не большая доработка
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Координаты курсора над блоком</title>
</head>

<body>
<div style="margin:10%;">
    <div id="detect" style="background-color:#C69; height:150px; width:80%;"></div>

<label for="PosX">Координаты X<input id="PosX" name="PosX" type="text" /></label>
<label for="PosY">Координаты Y<input id="PosY" name="PosY" type="text" /></label>
<label for="bgX">Начало<input id="bgX" name="bgX" type="text" /></label>
</div>
</body>
</html>

<script type="text/javascript">
var begin=0;
var x = document.getElementById("PosX"),
    y = document.getElementById("PosY"),
	bgX = document.getElementById("bgX"),
    el = document.getElementById("detect");

el.onmousemove = function(e){
    if(!e) e = event
	x.value = e.offsetX;
    y.value = e.offsetY;
	var begin = e.offsetX;
	bgX.value = e.offsetX;
	if (begin < (e.offsetX+15) ){
	begin=e.offsetX;
	alert("движение вправо");
	}
	if (begin < (e.offsetX-15) ){//|| begin<(e.offsetX-15
	begin=e.offsetX;
	alert("движение влево");
	}
}
el.onmouseout = function(e){
	begin=0;
}
</script>


Вообщем нужно что б когда пользователь водит мышкой по блоку туда сюда всплывало сообщение о том, что мышка прошла 15 влево или вправо
Сейчас показывает всегда движение вправо притом как только я навожу курсор на блок без движение по самому блоку
При уводе курсора с блока begin сбрасываем
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
как отследить, что координаты мышиного курсора изменяются belbek Общие вопросы Javascript 3 23.09.2010 11:59
iframe и координаты курсора i'am neizvestniy Events/DOM/Window 0 08.08.2010 15:01
координаты курсора клавиатуры demi Events/DOM/Window 1 06.03.2009 04:38
координаты курсора, параметры функции. arlek1n Общие вопросы Javascript 2 19.12.2008 11:09