Forum PHP.pl > [JS] zaznaczanie pozycji kursora nad warstwą

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JS] zaznaczanie pozycji kursora nad warstwą

Forum PHP.pl > Forum > Gotowe rozwiązania

phpion

30.10.2007, 18:01:42

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 
<!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" />
<input id="y" />
 
</body>
</html>
[HTML] pobierz, plaintext

.radex

31.10.2007, 08:36:40

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.

DeemR

23.05.2009, 22:04:55

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

kamil4u

23.05.2009, 22:35:42

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>

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.