VPF::ismap - получение координатов курсора на рисунке

Wowa

Дата 3.10.2005, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Админ
Сообщений: 15017
Регистрация: 14.9.2000
Где: Винград

Репутация: 1
Всего: 290

Бывает, что нужно получить и обработать координаты курсора на рисунке.

Существует два способа это сделать:
1. На стороне клиента
Это наиболее популярный и простой способ. Делается через MAP и не требует подробного описания. Поэтому перейдем сразу ко второму.

2. На стороне сервера

А вот об этом знают далеко не все. Дело в том, что можно добавить параметр ismap к тегу img. Тогда браузер будет отлавливать координаты мышки над рисунком.

Код


<a href="server.php"><img src="image.gif" width="200" height="100" border="0" ismap></a>

При нажатии на рисунок, будет вызван скрипт и переданы ему координату курсора над рисунком.
Пример: server.php?135,153

Теперь на стороне сервера можно обработать координаты и выполнить какие-то действия.

Однако, бывает, что нужно НА СТОРОНЕ клиента знать координаты того места на рисунке, на которое мы нажали мышкой. Попробуем это воплотить. Для этого нам придется поработать с фреймом, т.к. иначе никак.

Вот код первого файла:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<IFRAME name="getcoordinates" SRC="ismap.html" WIDTH="1" HEIGHT="1"></IFRAME>
<script language="JavaScript"><!--
function next(x,y) {
    alert('x = ' + x + ' y = ' + y);
}
//--></script>

<a href="ismap.html" target="getcoordinates"><img src="image.gif" width="200" height="100" border="0" ismap></a>


</body>
</html>

А вот код второго файла "ismap.html"

Код


<script language="JavaScript"><!--
if (location.search.length > 0) {
    var str = location.search;
    var commaloc = str.indexOf(",");
    parent.next(str.substring(1, commaloc),str.substring(commaloc+1,str.length));
}
//--></script>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »