Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > ismap - получение координатов курсора на рисунке

Автор: Wowa 3.10.2005, 17:02

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

Существует два способа это сделать:
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>