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>
Test Edin