Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JS] zaznaczanie pozycji kursora nad warstwą, np. do określania pozycji na mapie
phpion
post 30.10.2007, 18:01:42
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
.radex
post 31.10.2007, 08:36:40
Post #2





Grupa: Zarejestrowani
Postów: 1 657
Pomógł: 125
Dołączył: 29.04.2006

Ostrzeżenie: (0%)
-----

Taki mały szczegół, ale po co masz sobie utrudniać życie:

posx = posx -

zamiast tego po prostu:

posx -=

to szczegół, ale przy dużych pracach dobre nawyki mogą (nieznacznie, ale jednak) przyśpieszyć prace, chyba że dla ciebie -= i tym podobne nie są czytelne.


--------------------
blog | Tadam — minutnik do Pomodoro na Maka :)
Go to the top of the page
+Quote Post
DeemR
post 23.05.2009, 22:04:55
Post #3





Grupa: Zarejestrowani
Postów: 16
Pomógł: 1
Dołączył: 7.02.2009
Skąd: Poznań

Ostrzeżenie: (0%)
-----

Mógłby ktoś podać funkcję aby punkt zmieniał swoje położenie po wpisywaniu współrzędnych w polach?
Byłbym bardzo wdzięczny. Niestety nie umiem jeszcze js wstydnis.gif
Go to the top of the page
+Quote Post
kamil4u
post 23.05.2009, 22:35:42
Post #4





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Wspolrzedne na warstwie</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#area {
background-color: #CCC;
height: 200px;
width: 300px;
}
#point {
background-color: #000;
height: 3px;
position: relative;
width: 3px;
}
</style>
<script type="text/javascript">
function getXY(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}

posx = posx - parseInt(document.getElementById('area').offsetLeft);
posy = posy - parseInt(document.getElementById('area').offsetTop);

document.getElementById('x').value = posx;
document.getElementById('y').value = posy;

movePoint(posx, posy);
}

function movePoint(posx, posy) {
document.getElementById('point').style.left = posx + 'px';
document.getElementById('point').style.top = posy + 'px';
}

</script>
</head>
<body>

<div id="area" onclick="getXY(event);">
<div id="point"></div>
</div>

<input id="x" onKeyUp="document.getElementById('point').style.left = this.value + 'px';"/>
<input id="y" onKeyUp="document.getElementById('point').style.top = this.value + 'px';"/>

</body>


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
« 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 17.07.2025 - 23:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn