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>
<style type="text/css">
.kutu {
position: absolute;
border: dashed 1px #59f;
margin: 15px 15px 15px 10px;
padding: 15px;
}
</style>
<script type="text/javascript">
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>
<div class="kutu" id="panel">
<span>Fare Pozisyonu: (x,y) </span>
<span id="farepos"></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.
<div class="kutu" id="panel">
<span>Fare Pozisyonu: (x,y) </span>
<span id="farepos"></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.
<style type="text/css">
.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.
<script type="text/javascript">
//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.