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>