Cara Membuat Mouse Position di Blog

Written by RA_Syihan on Thursday, December 16, 2010 | Category: Trick, Tutorial

jQuery membuat mendeteksi posisi mouse mudah. Kamu cuma harus belajar bagaimana cara membaca pageX dan pageY , dan mereka akan memberitahu kamu dimana mouse (dalam piksel) hanya pada saat mouse kamu aktif.

buat saya sih ini sesuatu yang keren, tapi ga tau lah buat sobat-sobat blogger lain.
coba perhatikan contoh dibawah ini

ini contohnya:

0, 0

ini kode untuk yang diatas ini

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})
</script>
<body>
<h2 id="status">
0, 0
</h2>
</body>
</html>

sobat tinggal otak-atik lagi lah, cukup mudah ....

Bisa juga pelacakan dengan mengklik suatu objek, lalu kamu pasti tau posisi mouse berada.

Sebagai contohnya dibawah ini:

0, 0

klik dimana saja

yang diatas ini kodenya ini nih..

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})
</script>
<body>

<h2 id="status2">
0, 0
</h2>
<div style="width: 100px; height: 100px; background:#ccc;" id="special">
Click me anywhere!
</div>
</body>
</html>

catatan: Perhatikan bahwa nilai-nilai piksel memberikan relatif terhadap seluruh dokumen. JikaAnda ingin menghitung posisinya dalam elemen tertentu, atau dalam viewport, Andadapat melihat offsetY dan offsetX, dan melakukan sedikit aritmatika untuk menemukannilai relatif .

Berikut adalah contoh untuk menemukan posisi dalam elemen tertentu daripadahalaman:

$("#special").click(function(e){

 var x = e.pageX - this.offsetLeft;
 var y = e.pageY - this.offsetTop;

      $('#status2').html(x +', '+ y);
   });

perhatian juga, kode-kode yang saya berikan bukan sebagai kode tetap ya, sobat juga bisa mengedit lagi jika merasa kurang.
yahh itulah yang bisa saya posting, kalau ada komentar silahkan lah komentar sesuka kamu. Asal jangan spam. salam blogger UnoZoneu™
thankss