Бывает, что нужно получить и обработать координаты курсора на рисунке.
Существует два способа это сделать:
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>
|
|
