Javascript ile mouse koordinatlarını buldurmak

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.

X


Bu dökümanda javascript ile sayfanızda mouse koordinatlarını tespit eden kısa bir koda değineceğim. Örneği yukarıdaki gibidir.
var IE = document.all ? true : false;
if (!IE) document.captureEvents( Event.MOUSEMOVE )
document.onmousemove = getMouseXY;
Bu kısımda browser'a göre mouse hareketini getMouseXY fonksiyonu çalıştırmaya yönlendiriyoruz.
var tempX = 0;
var tempY = 0;
Geçici mouse X, Y değerlerini saklayan değişkenler.
function getMouseXY(e) {

  // browser'a mouse koordinatlari yakalaniyor ve degiskenlere aktariliyor..
  if (IE) {
    tempX = event.clientX + document.body.scrollLeft;
    tempY = event.clientY + document.body.scrollTop;
  }else {
    tempX = e.pageX;
    tempY = e.pageY;
  }

  // eger negatif degerlerde ise 0 ataniyor
  if (tempX < 0){tempX = 0;}
  if (tempY < 0){tempY = 0;}

  // degerler dokumanda yazdiriliyor..
  document.Show.MouseX.value = tempX;
  document.Show.MouseY.value = tempY;

  return true;
}
Mouse koordinatlarını bulduran ve Show formundaki MouseX ve MouseY inputlarına değerleri yazdıran fonksiyon.

Buradaki kodu, fonksiyonu kullanarak layer'lari taşıyabilir, mouse'un bazı objeler üstüne gelmesiyle değişik artaksiyonlar yapabilirsiniz.

Eski sitedeki tooltip'ler bu şekilde çalışıyordu.


Hazırlayan : Mehmet Fatih YILDIZ

Yorumlar

Üye Resmi Muhammed Han Çetin
16 Eylül Salı ´08 10:52
Bu fonksiyonu pek çok uygulamada kullanacağım.Teşekkürler.
Üye Resmi Celaleddin Subaşı
31 Ocak Cumartesi ´09 13:27
peki diyelimki herhangi bir yere tıkladık, buranın x ve y koordinatlarını nasıl yazdırabiliriz?
Üye Resmi rıza altınışık
13 Şubat Pazartesi ´12 05:54
Eline koluna yüreğine sağlık çok işime yaradı
Üye Resmi sefa akhan
27 Ocak Pazar ´13 17:56
eyvallah cok ısime yaradı ustad   :-D  
Üye Resmi Ömer Gültekin
2 Nisan Perşembe ´15 02:10
iyi günler hocam
Bu document.all kullanınca neden jquery show hide gibi fonksiyonlarını kullanamıyorum yardımlarınız için teşekkürler
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor