myNotlar Logo

layerX ve layerY


Firefox

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

yatayFare işaretçisinin, içinde bulunduğu katmandaki soldan uzaklığı.
dikeyFare 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
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |