JavaScript Fare Konumunu Öğrenme

Bu örneğimizde JavaScript ile web tarayıcısında hareket ettirdiğimiz farenin konumunu alarak x ve y koordinat bilgisini ekranda göstereceğiz. Fare tarayıcı üzerinde hareket ettikçe koordinat bilgilerinin değiştiği görülecektir. Farenin x eksenindeki konumunu clientX ile y eksenindeki konumunu ise clientY ile alacağız.

Kodlarımız:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.yazilimkodlama.com</title>
</head>
<style>
.konum{
width: 250px;
height: 50px;
line-height: 50px;
font-size: 2em;
background:#0066cc;
color:#FFFFFF;
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=olay.clientX;
var ypos=olay.clientY;
 
//clientX: farenin x eksenindeki konumu
//clientY farenin y eksenindeki konumu

document.getElementById('x').innerHTML=xpos;
document.getElementById('y').innerHTML=ypos;

 
} 
</script>
</html>