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