myNotlar Logo

document.elementFromPoint()


Internet Explorer

document.elementFromPoint metodu, sayfanın görünen bölümü için belirtilen yatay ve dikey konumlardaki elementin alınmasını sağlar.

Sözdizimi

elem = document.elementFromPoint(konumX, konumY)
konumXYatay konum. Soldan uzaklığı belirler.
konumYDikey konum. Üstten uzaklığı belirler.

Dönüş Değeri

elemBelirtilen yatay ve dikey konumdaki element.

elementFromPoint metodu sayfanın görünen kısmı ile ilgilendiğinden, sayfanın sol-üst konumunu her zaman için '0' olarak kabul eder. Bu yüzden sürükleme çubuklarına sahip bir sayfada herhangi bir nesnenin/elementin konumunu öğrenmek, sayfa sağa-sola/yukarı-aşağı kaydırılabileceği için ekstra karmaşaya neden olacaktır. Bu tür bir hesaplamayı gerektiren bir durum genel olarak ender olacağından bu metoda parametre aktarmak için clientX ve clientY özelliklerini kullanmak rastgele konum tespiti için faydalı olacaktır.

Aşağıdaki örnek, elementFromPoint metodu kullanılarak sayfa üzerinde ana elementleri belli bazı elementlerin alınarak, style özelliklerinin değiştirilmesini göstermektedir.


<style type="text/css">
#ornekDiv, #ornekCapa, #ornekParaf
{
	margin:5px;
	border:dotted 1px black;
}
#ornekDiv
{
	float:left;
	width:120px;
	height:90px;		
}
</style>

<table><tr>
<td id="ornekHucre">
   <div id="ornekDiv" title="DIV Elementi">Tıkla bana!</div>
   <a id="ornekCapa" href="http://www.mynotlar.com" title="myNotlar Ana Sayfa">myNotlar</a>
   <p id="ornekParaf" title="Örnek açıklaması">Bu örnekte, fare işaretçisi elementler 
      üzerinden ayrıldığı zaman çerçevelerinin eski haline gelmesi, elementlerin <b>onmouseout</b> olayı 
      aracılığıyla farklı bir fonksiyon ile yapılmaktadır.</p>
</td></tr></table>

<script type="text/javascript">
// Fare işaretçisinin bulunduğu konumdaki elementin ID ve title özelliklerini gösterir.
function elementGoster()
{
    var elem = document.elementFromPoint(event.clientX, event.clientY);
    if(elem.parentNode.id == "ornekHucre")
    {
        alert("ID    : " + elem.id + "\n" + 
              "Title : " + elem.title);
    }
}
// Fare işaretçisinin bulunduğu konumdaki elementin çerçevesini düz-mavi yapar.
function elemKontrol()
{
    var elem = document.elementFromPoint(event.clientX, event.clientY);
    if(elem.parentNode.id == "ornekHucre")
    {
        elem.style.border = "solid 1px blue";
    }
}

// Elementlerin "onmouseout" olayında ilgili elementin çerçevesini eski haline alır.
function cerceveCiz(gonderen)
{
    gonderen.srcElement.style.border = "dotted 1px black";
}

// İlgili elementler ve doküman.body için olayları fonksiyonlara bağlar.
function ornekKur()
{

    var Div = document.getElementById("ornekDiv");
    var Capa = document.getElementById("ornekCapa");
    var Paraf = document.getElementById("ornekParaf");
        
    Div.attachEvent("onmouseout",cerceveCiz);
    Capa.attachEvent("onmouseout",cerceveCiz);
    Paraf.attachEvent("onmouseout",cerceveCiz);        
        
    document.body.attachEvent('onmousemove',elemKontrol);
        
    document.body.attachEvent('onclick',elementGoster);
}

window.attachEvent('onload',ornekKur);

</script>

Örnek, tüm sayfa için geçerli değildir. Sadece ana elementinin id özniteliği "ornekHucre" olan nesneler için çalışır.

Test Edin
Tıkla bana!
myNotlar

Bu örnekte, fare işaretçisi elementler üzerinden ayrıldığı zaman çerçevelerinin eski haline gelmesi, elementlerin onmouseout olayı aracılığıyla farklı bir fonksiyon ile yapılmaktadır.

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