Javascript ile pageX ve pageY fonsiyonu

pageX ve pageY fonsiyonu kullanımı. Bu fonksiyonlar fare imlecinin web sayfasının sol üst köşesinden yatay ve dikey uzaklığını verir

yatay = event.pageX

dikey = event.pageY

Dönüş Değeri
yatay Fare işaretçisinin, doküman üzerindeki soldan uzaklığı.
dikey Fare işaretçisinin, doküman üzerindeki üstten uzaklığı.

Aşağıdaki örnek, fare işaretçisinin doküman üzerinde bulunduğu güncel konumun, işaretçinin sağ-alt tarafında gösterilmesini göstermektedir.

<style type=”text/css”>
#bilgiKutu
{
position:absolute;
padding:10px;
opacity:0.7;
color:white;
font-weight:bold;
background-color:#559900;
border:solid 2px #008800;
}
</style>

<input id=”ornekSabit” type=”checkbox” checked=”checked” onClick=”sabitle()”/>
<label for=”ornekSabit”>Sabitle</label>

<div id=”bilgiKutu”></div>

<script type=”text/javascript”>

var bilgiKutu = document.getElementById(‘bilgiKutu’);

function yakala(olay)
{
var yazilacak = “Soldan (pageX) : ” + olay.pageX +
“<br/>Üstten (pageY) : ” + olay.pageY;

bilgiKutu.innerHTML = yazilacak;
bilgiKutu.style.top = olay.pageY + 20;
bilgiKutu.style.left = olay.pageX + 15;
}

function sabitle()
{
if(document.getElementById(‘ornekSabit’).checked)
bilgiKutu.style.position = ‘static’;
else
bilgiKutu.style.position = ‘absolute’;
}

document.onmousemove = yakala;
</script>