layerX ve layerY
 

layerX ve layerY özellikleri, fare olayının gerçekleştiği katman içindeki fare işaretçisinin, üstten ve soldan uzaklıklarını verirler.

Bu değerlerin Internet Explorer tarayıcısındaki karşılıkları offsetX ve offsetY özellikleridir.
Sözdizimi

yatay = event.layerX

dikey = event.layerY

Dönüş Değeri
yatay Fare işaretçisinin, içinde bulunduğu katmandaki soldan uzaklığı.
dikey Fare işaretçisinin, içinde bulunduğu katmandaki üstten uzaklığı.

Aşağıdaki örnek, bir DIV elementi içinde, fare ile tıklanan konumun layerX ve layerY özellikleri ile öğrenilerek, ilgili konuma ufak bir kare çizilmesini göstermektedir.

<style type="text/css">
#noktaAna
{
width:250px;
height:150px;
border:solid 1px black;
background-color:white;
position:relative;
}
</style>

<div id="noktaAna"></div>

<script type="text/javascript">

// 10 renk arasından rastgele bir renk döndürür.
function renkVer()
{
sayi = parseInt(Math.random()*10); // 0..9 arası rastgele sayı

switch(sayi)
{
case 0: return 'gray'; // 'return' kullanıldığı için
case 1: return 'maroon'; // 'break' deyimine gerek yoktur.
case 2: return 'silver';
case 3: return 'red';
case 4: return 'purple';
case 5: return 'fuchsia';
case 6: return 'green';
case 7: return 'lime';
case 8: return 'navy';
case 9: return 'blue';
}
}

// DIV oluşturur.
function noktaYap()
{
var yeni = document.createElement('div');
yeni.style.width = '7px';
yeni.style.height = '7px';
yeni.style.position = 'absolute';
yeni.style.backgroundColor = renkVer();
return yeni;
}

// Oluşturulan DIV'in konumunu hesaplayarak 'noktaAna' içine ekler.
function noktala(olay)
{
var soldan = (olay.layerX < 4) ? 0 : olay.layerX - 4;
var ustten = (olay.layerY < 4) ? 0 : olay.layerY - 4;

var nokta = noktaYap();

nokta.style.top = ustten;
nokta.style.left = soldan;
noktaAna.appendChild(nokta);
}

var noktaAna = document.getElementById('noktaAna');
noktaAna.onmousedown = noktala;

</script>