mehmetduran.com - Paylaşmak Güzeldir...
Javascript ile Mouse Pozisyonunu Bulma
Bu yazımda javascript ile mouse pozisyonunu nasıl bulacağımızı göstermeye çalışacağım. Birçok uygulamada ihtiyaç duyabileceğimiz ve birçok uygulamada kullanacağımız bu yöntemi javascript ile basitçe yapabiliyoruz. Ancak tarayıcıların gösterdiği farklılıklar nedeniyle kontroller yapıp tarayıcılardan kaynaklanacak sorunları engelleyeceğiz. Sonuçta mouse pozisyonunu veren bir kodlamayı elde edeceğiz. Bu kodlamayı birçok uygulamada kullanabiliriz. Tooltip uygulamalarında, geliştireceğimiz farklı uygulamalarda kullanabiliriz. Düşündüğüm tooltip uygulaması için bu kodlamaya ihtiyaç duydum ve hazırladım. Sizlere de faydası olacağını düşündüğüm için paylaşıyorum.

Bu tür uygulamalarda öncelikle mouse'un hareket ettiğini yakalamamız gerekiyor. Bunu da javascript içinde yer alan event'lar ile (örnek : mousemove) yapacağız. Aşağıdaki gibi bir kodlama ile hem mouse pozisyonunu hem de html kutuyu (div elementini) mouse etrafında tutacağız. Kısaca tooltip mantığını anlayacağız. Geliştirmesi sizlere kalmış.

<head>
  <script type="text/javascript">
    var x = 0, y = 0;
    function bul(e)
    {
 
      if(!e) var e = window.event;
      if (e.pageX  e.pageY)
      {
        x = e.pageX;
        y = e.pageY;
      }
      else if (e.clientX  e.clientY)
      {
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      }
 
      document.getElementById("sonuc").innerHTML = "x : " + x + " - y : " + y;
      document.getElementById("tooltip").style.left = x + "px";
      document.getElementById("tooltip").style.top = y - 20 + "px";
    }
    document.onmousemove = bul;
  </script>
</head>
<body>
  <div id="sonuc"></div>
  <div id="tooltip" style="position:absolute;">Tooltip İçeriği</div>
</body>

Görüldüğü gibi kodlarımız ile mouse pozisyonunu elde edebiliyoruz. Örnek için hazırladığım dosyayı buradan görebilirsiniz. Böylece tooltip mantığını da anlamış olacağız.

İyi Çalışmalar!
Mehmet Duran 08 Mart Pazar 2009 2 18110 5,0
Javascript Web Tasarım Mouse İndir Html Tasarım-Görsellik
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Asp.net ile ve Jquery Ajax ile Kur (Döviz) Bilgilerini Alma Jquery ile Saydamlık(Opacity) Kullanarak Menü Hazırlama Fonts Pack 2008 (9 Farklı Font Paketi) Asp.net ve Javascript ile Slayt Asp.net - Ajax E-book
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Elgiz ÖZcan 31 Aralık Cuma 2010 11:17 #1
Mehmet Bey merhaba, Mouse koordinatlarını alma mozilla firefox da çalışmıyor. Mozilla da nasıl çalıştırabilirim.
Mehmet Duran 06 Ocak Perşembe 2011 11:28 #2
@Elgiz, benim kullandığım firefox'ta çalışıyor. Senin taarayıcının versiyonu eski olabilir ve gerekli eventları çalıştırmadığı için uygulama da çalışmıyor olabilir.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Bazı yıkılışlar daha parlak kalkınışların teşvikçisidir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009