myNotlar Logo

Fare pozisyonu


Fare Pozisyonu:

Bu örnek javascript’te onmousemove olayını kullanarak fare konumunu nasıl öğreneceğimizi ve kullanacağımızı açıklar.

Örneğimizin amacı fare imlecinin sağ-alt tarafında hareketli bir kutuda o anki fare pozisyonunu göstermektir

Tarayıcılarda fare hareket olayını onmousemove olayı kontrol eder. Bu olay fare hareketi ile ilgili bazı veriler içerir. Bu verilerden ikisi fare işaretçisinin o anda pencerenin üste ve sola uzaklığını belirtir.

Script kodumuzda ilk önce konumların daha iyi anlaşılması için FarePosUst ve FarePosSol değişkenlerini tanımlıyoruz.

FarePosSol = olay.clientX; FarePosUst = olay.clientY;

Kodları ile fare işaretçisinin o anda bulunduğu konumu değişkenlerimize aktarıyoruz.

document.getElementById("BilgiKutusu").style.top = FarePosUst; document.getElementById("BilgiKutusu").style.left = FarePosSol;

kodları ile oluşturduğumuz kutunun pozisyonunu dinamik olarak fare işaretçisinin pozisyonuna eşitliyoruz.

document.getElementById("mousepos").innerHTML = FarePosSol +","+ FarePosUst;

kodu ile fare işaretçi pozisyonunun kutu içindeki bilgilerini güncelliyoruz. Son olarak,

window.document.onmousemove = FarePosAl;

kodu ile onmousemove olay kontrolünü kendi fonksiyonumuza bağlıyoruz.


Kodlar aşağıdaki gibidir:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<title>JS ile Fare Pozisyonu ve Tuş Denetimi</title>
	<style type="text/css">
		.tasinan {
			position: absolute;
			border: dashed 1px #59f;
			margin: 15px 15px 15px 10px;
			padding: 15px;
		}
	</style>  
<script type="text/javascript">

var FarePosUst = 0;
var FarePosSol = 0;

function FarePosAl(olay)
{
	if(!olay) var olay = window.event;
	
	FarePosSol = olay.clientX;
	FarePosUst = olay.clientY;
	
	document.getElementById("BilgiKutusu").style.top = FarePosUst;
	document.getElementById("BilgiKutusu").style.left = FarePosSol;
	
	document.getElementById("mousepos").innerHTML = FarePosSol + ", " + FarePosUst;
	
	return true;
}
// Fare hareket olay kontrolünü kendi fonksiyonumuza bağlıyoruz.
window.document.onmousemove = FarePosAl;

</script>
</head>
<body>
	<div class="tasinan" id="BilgiKutusu">
		<span>Fare Pozisyonu: </span><span id="mousepos">
		</span>
		<br />
	</div>
</body>
</html>
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |