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>

Test Edin

İlgili Başlıklar