Javascript layerX ve layerY fonksiyonları

layerX ve layerY fonksiyonları: fare olayının gerçekleştiği katman içindeki fare işaretçisinin, sol üst köşeye göre konumu verir.

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.

// 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>

Dersler