Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JS] zaznaczanie pozycji kursora nad warstwą, np. do określania pozycji na mapie
phpion
post
Post #1





Grupa: Moderatorzy
Postów: 6 072
Pomógł: 861
Dołączył: 10.12.2003
Skąd: Dąbrowa Górnicza
Witam,
napisałem odpowiednie funkcyjki JS - może komuś się przyda. Zamiast div'a można dać np. mapkę i wskazać gdzie znajduje się dany obiekt na mapie (współrzędne zrzucone do inputów).
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <title>Wspolrzedne na warstwie</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. #area {
  9. 	background-color: #CCC;
  10. 	height: 200px;
  11. 	width: 300px;
  12. }
  13. #point {
  14. 	background-color: #000;
  15. 	height: 3px;
  16. 	position: relative;
  17. 	width: 3px;
  18. }
  19.   </style>
  20. <script type="text/javascript">
  21. function getXY(e) {
  22. 	var posx = 0;
  23. 	var posy = 0;
  24. 	if (!e) var e = window.event;
  25. 	if (e.pageX || e.pageY) {
  26. 		posx = e.pageX;
  27. 		posy = e.pageY;
  28. 	}
  29. 	else if (e.clientX || e.clientY) 	{
  30. 		posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  31. 		posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  32. 	}
  33.  
  34. 	posx = posx - parseInt(document.getElementById('area').offsetLeft);
  35. 	posy = posy - parseInt(document.getElementById('area').offsetTop);
  36.  
  37. 	document.getElementById('x').value = posx;
  38. 	document.getElementById('y').value = posy;
  39.  
  40. 	movePoint(posx, posy);
  41. }
  42.  
  43. function movePoint(posx, posy) {
  44. 	document.getElementById('point').style.left = posx + 'px';
  45. 	document.getElementById('point').style.top = posy + 'px';
  46. }
  47. </script>
  48. </head>
  49. <body>
  50.  
  51. <div id="area" onclick="getXY(event);">
  52. 	<div id="point"></div>
  53. </div>
  54.  
  55. <input id="x" />
  56. <input id="y" />
  57.  
  58. </body>
  59. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- phpion.com   [JS] zaznaczanie pozycji kursora nad warstwą   30.10.2007, 18:01:42
- - radex_p   Taki mały szczegół, ale po co masz sobie utrudniać...   31.10.2007, 08:36:40
- - DeemR   Mógłby ktoś podać funkcję aby punkt zmieniał swoje...   23.05.2009, 22:04:55
- - kamil4u   Kod<!DOCTYPE html PUBLIC "-//W3C//DTD ...   23.05.2009, 22:35:42

« Następny starszy · Gotowe rozwiązania · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 04:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn