JavaScript ile farenin pozisyonunu öğrenmek için gerçekleşen olayın clientX ve clientY özellikleri kullanılmaktadır.
Aşağıdaki örnekte tarayıcı ekranında fare hareket ettirildikçe farenin konumunu ekrandaki div etiketlerine yazdıran uygulama örneği mevcuttur.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>YAZILIM BİLİŞİM</title>
</head>
<style>
.konum{
width: 250px;
height: 50px;
line-height: 50px;
font-size: 2em;
background: #64DDBB;
color:#D33257;
padding:5px;
margin:5px;
}
</style>
<body>
<div id="x" class="konum">0</div>
<div id="y" class="konum">0</div>
</body>
<script>
//window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar
window.onmousemove=function(olay)
{
//gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor.
var xpos=document.getElementById('x');
var ypos=document.getElementById('y');
//clientX: farenin x eksenindeki konumu
//clientY farenin y eksenindeki konumu
}
</script>
</html>[divider]Aşağıdaki örnekte tarayıcı ekranında fare hareket ettirildikçe ekrandaki div etiketinin genişliğini değiştiren örnek mecvuttur.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>YAZILIM BİLİŞİM</title>
</head>
<style>
.konum{
width: 250px;
height: 50px;
line-height: 50px;
font-size: 2em;
background: #64DDBB;
color:#D33257;
padding:5px;
margin:5px;
}
#kutu{
/* ÖNEMLİ NOT: HAREKET ETTİRİLECEK NESNENİN POZİSYON DEĞERİ ABSOLUTE OLMAK ZORUNDA!!!*/
position: absolute;
width: 100px;
height: 100px;
background: #FF7416;
}
</style>
<body>
<div id="x" class="konum">X</div>
<div id="y" class="konum">Y</div>
<div id="kutu"></div>
</body>
<script>
//window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar
window.onmousemove=function(olay)
{
//gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor.
var xpos=document.getElementById('x');
var ypos=document.getElementById('y');
var kutu=document.getElementById('kutu');
//clientX: farenin x eksenindeki konumu
//clientY farenin y eksenindeki konumu
xpos.innerHTML=olay.clientX;
ypos.innerHTML=olay.clientY;
//ÖNEMLİ NOT: HAREKET ETTİRİLECEK NESNENİN POZİSYON DEĞERİ ABSOLUTE OLMAK ZORUNDA!!!
kutu.style.left=olay.clientX+"px";
kutu.style.top=olay.clientY+"px";
}
</script>
</html>
Aşağıdaki örnekte tarayıcı ekranında fare hareket ettirildikçe ekrandaki div etiketini hareket ettiren örnek mecvuttur.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>YAZILIM BİLİŞİM</title>
</head>
<style>
.konum{
width: 250px;
height: 50px;
line-height: 50px;
font-size: 2em;
background: #64DDBB;
color:#D33257;
padding:5px;
margin:5px;
}
</style>
<body>
<div id="x" class="konum">X</div>
<div id="y" class="konum">Y</div>
</body>
<script>
//window (taraycı penceresi) üzerinde fare hareket ettirildikçe çalışacak kodlar
window.onmousemove=function(olay)
{
//gerçekleşen olayla ilgili tüm bilgi olay değişkenine aktarılıyor.
var xpos=document.getElementById('x');
var ypos=document.getElementById('y');
//clientX: farenin x eksenindeki konumu
//clientY farenin y eksenindeki konumu
xpos.style.width=olay.clientX +"px";
ypos.style.width=olay.clientY +"px";
}
</script>
</html>
