Форум

Мел · #1 (**permalink**) 02.10.2008, 16:31

Как с помощью JavaScript присвоить значения переменным foo_x и foo_y элемента формы <input type="image" name="foo" id="foo" onclick="getFoo();"/> при клике в функции getFoo() ?
Как ни пытался - ничего не выходит.

Андрей Параничев · #2 (**permalink**) 02.10.2008, 16:33

Мел,
Не понял, присвоить переменные этому DOM элементу, или что?

Добавил:
Или вы имеете в виду получение переменных x и y, которые передаются по сабмиту на сервер?
Получить их напрямую из JavaScript нельзя, придется получать их точно так же, как и для других элементов.

Мел · #3 (**permalink**) 02.10.2008, 16:51

Да.
(Кпримеру, на PHP на стороне сервера я бы сделал так :
<? $foo_x=$_POST['foo_x']; $foo_y=$_POST['foo_y'] ; ?>,
либо
<? $foo_x=$_GET['foo_x']; $foo_y=$_GET['foo_y'] ; ?>, в зависимости от метода GET или POST, но мне нужно сделать это на стороне клиента с помощью JavaScript.
PS: Я новичек в JavaScript.

Мел · #4 (**permalink**) 02.10.2008, 17:03

Опять сообщение продублировалось. Видимо я тороплюсь.

Мел · #5 (**permalink**) 02.10.2008, 17:12

Сообщение от Андрей Параничев

придется получать их точно так же, как и для других элементов.

Это в смысле только на стороне сервера, либо <input type="image"> использовать как просто <img> ?

Андрей Параничев · #6 (**permalink**) 02.10.2008, 17:17

Мел,
Я могу придумать только что-нибудь вот такое:

<html>
<head>
	<script>
		function getOffsets(element) {
			var left = element.offsetLeft,
			    top  = element.offsetTop;
			
			var parent = element.offsetParent;
			
			while(parent && parent.tagName != "BODY")
			{
				left += objParent.offsetLeft;
				top  += objParent.offsetTop;
				parent = parent.offsetParent;
			}
			
			return {top: top, left: left};
		}
			
		function getFoo(e, element) {
			var mouseX = e.clientX;
			var mouseY = e.clientY;
			var pos = getOffsets(element);
			if (pos) {
				var foo_x = mouseX - pos["left"];
				var foo_y = mouseY - pos["top"];
				alert([foo_x, foo_y]);
			}
		}
	</script>
</head>
<body>
	<input type="image" src="1220100104815.jpg" name="foo" id="foo" onclick="getFoo(event, this)"/>
</body>
</html>

Мел · #7 (**permalink**) 02.10.2008, 17:52

Спасибо за помощь.

Мел · #8 (**permalink**) 02.10.2008, 18:52

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

Получается, есть только 2 варианта:

либо через скрытый фрейм, с помощью $_GET или $_POST,

либо используя Ваше предложение + XMLHttpRequest (даже без <input type="image"> , а просто <img>) ?

PS: Кстати, задавал такой же вопрос про <input type="image" ...> на форуме посвященном JsHttpRequest, но ответа не получил, видимо с помощью JsHttpRequest тоже нельзя. Извиняюсь, если глупо звучит - только начал разбираться с этой темой.

Андрей Параничев · #9 (**permalink**) 02.10.2008, 19:07

Мел,
Да, получается только два варианта. А чем вам помочь?

Мел · #10 (**permalink**) 02.10.2008, 20:05

Андрей Параничев,
большое спасибо, пока больше ничем - надо поюзать.

Я вообще раньше думал, что JavaScript мне никчему - достаточно CSS, PHP. Теперь понял - JavaScript просто необходим. Буду изучать.

Форум

Справочник

Discord чат

Курсы javascript