Displays the cursor position with javascript

Javascript di bawah ini berfungsi untuk menampilkan posisi cursor pada setiap titik di halaman blog/web. Sekalipun sepertinya tak begitu dibutuhkan, namun script sederhana penunjuk posisi cusor ini sangat bermanfaat untuk aktifitas yang berkaitan dengan desain blog. Hampir semua titik di seluruh bagian blog dapat terdeteksi dengan akurasi yanga sangat baik sehingga bahkan anda dapat mengukur dimensi sebuah elemen dengan cukup mudah dan cepat. Jika anda ingin menampilkan titik koordinat sebuah elemen di halaman blog, javascript ini juga akan sangat bermanfaat sekalil. Sebagai contoh misalnya anda ingin menampilkan attribute "usemap" sebuah image.
<script type="text/javascript">
window.onload = init;
function init() {
 if (window.Event) {
 document.captureEvents(Event.MOUSEMOVE);
 }
 document.onmousemove = getCursorXY;
}

function getCursorXY(e) {
 document.getElementById('cursorX').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
 document.getElementById('cursorY').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
</script>

Keterangan :

  • Perhatikan kode yang berwarna merah di bawah ini (kode css). Kode tersebut berfungsi untuk megatur posisi display. Rubah nilainya untuk mendapatkan posisi yang dikehendaki.
  • Simpan kode css dan javascript di antara tag pembuka dan penutup head
  • Simpan xHTML di bagian body
<style type="text/css">
.mps{
      width:200px;
      height:60px;
      background:#777;
      position:fixed;
      top:20px;
      right:20px;
      border:2px solid #555;
      border-radius:5px;
      text-shadow:1px 1px 1px #000;
}
input.mps-x,input.mps-y{
      position:relative;
      width:65px;
      height:30px;
      font:bold 1em Arial;
      color:yellow;
      background:#4f65d4;
      border:1px solid #444;
      padding:0 6px !important;
      margin:22px 5px 5px;
      text-align:center;
      border:2px solid #555;
      border-radius:5px;
      text-shadow:1px 1px 1px #000;
}
input.mps-y{
      float:right;
}      
.mps:before,.mps:after{
      position:absolute;
      top:0px;
      content:"X-position";
      color:#fff;
}
.mps:before{
      left:10px;
}
.mps:after{
      content:"Y-position";
      right:10px;
}
</style>
<div class="mps">
<input class="mps-x" type="text" id="cursorX" size="3"> <input class="mps-y" type="text" id="cursorY" size="3"> 
</div>
Silahkan lakukan beberapa pengukuran pada image di bawah. Anda bisa mengetahui berapa margin, border, padding dan ukuran image dengan memanfaatkan javascript penampil posisi cursor.
Please click the button to display. Continue with editing code and click to see the results!

Tidak ada komentar:

Posting Komentar

My ProfileC l o s e

FollowerC l o s e