Fare koordinatlarini yakalama

Merhaba arkadaslar,

Bu dersimizde web sayfamizda fare imlecinin koordinatlarini alarak ekranda göstermeye çalisacagiz.Ayrica farenin koordinatlarina göre onu takip eden bir kutucuk tasarlayacagiz.

Bunun için web sayfamiza asagidaki kodlari ekleyelim.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Fare koordinatlarini alma</title>

.kutu {

position: absolute;

border: dashed 1px #59f;

margin: 15px 15px 15px 10px;

padding: 15px;

}

</style>

var x = 0;

var y = 0;

function farePosAl(olay)

{

if(!olay) var olay = window.event;

x = olay.clientX;

y = olay.clientY;

document.getElementById("panel").style.top = y;

document.getElementById("panel").style.left = x;

document.getElementById("farepos").innerHTML =" "+ x + ", " + y;

return true;

}

window.document.onmousemove = farePosAl;

</script>

</head>

<body>

<span>Fare Pozisyonu: (x,y) </span>

<br>

</div>

</body>

</html>

Fare koordinatlarini almadan önce fare imlecini takip eden bir adet kutu tasarlayacagiz. Kutumuzun adi “panel” ve kullanacagi sitil de “kutu” olarak tanimlandi.”kutu” sitilinin özelliklerini sayfamizda style taglari arasinda belirleyecegiz.Daha sonra kutumuzun içinde faremizin koordinatlarini göstermek için span taglarindan yararlandik.Span tagini bir label olarak da düsünebilirsiniz.ekledigimiz span’a “farepos” adini verdik ki javascript kodu yazarken bu elemente erisebilelim.

<span>Fare Pozisyonu: (x,y) </span>

<br>

</div>

Simdi sira geldi kutumuzun sitilini belirlemeye.Bunun için “.kutu” diye bir sinif tanimladik.Bu sinifimiza kutumuzun pozisyonu, kenar özellikleri vb. gibi özelikleri ekledik.Tercihinize göre sizler baska özellikler de ekleyebilirsiniz.

.kutu {

position: absolute;

border: dashed 1px #59f;

margin: 15px 15px 15px 10px;

padding: 15px;

}

</style>

Isin zor kismi fare koordinatlarini almak ve kutumuzu fare ile birlikte hareket ettirmek.Bunun için javascript kodu yazmamiz gerekecek.

//1) Sayfamiz ilk açildiginda x ve y koordinatlarini (0,0) olarak belirledik.

var x = 0;

var y = 0;

//3)Farenin hareket olayinda farePosAl fonksiyonu çalisiyor.

function farePosAl()

{

//4)Farenin “mousemove” olayini “olay” degiskenimize atiyoruz.

var olay = window.event;

//5)Farenin x ve y koordinatlarini aliyoruz.

x = olay.clientX;

y = olay.clientY;

//6)”panel” adini verdigimiz kutumuzun “top” ve “left” pozisyonlarina daha önce aldigimiz x ve y koordinatlarini atiyoruz.

document.getElementById("panel").style.top = y;

document.getElementById("panel").style.left = x;

//7)En sonunda “farepos” diye alandirdigimiz span imiza koordinatlari yaziyoruz.

document.getElementById("farepos").innerHTML =" "+ x + ", " + y;

return true;

}

//2) Faremiz sayfa üzerinde hareket ederken farePosAl() fonksiyonu trigger edilecek.

window.document.onmousemove = farePosAl;

</script>

Bir sonraki dersimizde görüsmek üzere iyi çalismalar.