Belajar Kode CSS & Desain Blog: 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!

<!DOCTYPE html>
<html>
<title>Displays the cursor position with javascript</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>   
<script src="http://gubhugcss-jquery.googlecode.com/svn/tooltip/jQttipnoclass.js" type="text/javascript"></script>

<style type="text/css">
body{color:#000;font-family:Arial;font-size:14px;padding:0;margin:0 auto;background:#ccc; }
.rd{color:red;}.be{color:blue;}.gn{color:green;}
.konten{margin:70px 0;}
img{margin:20px;background:red;padding:22px;border:13px solid orange;}
.bungkus{float:left;position:relative;}
.bungkus:hover:after{position:absolute;left:60px;top:60px;color:white;font-size:27px;content:"berapa diameterku?";}
</style>
<style>
#jQttipnoclass{position:absolute;border:2px solid #aaa;background:rgba(255,0,0,0.8);padding:2px 5px;color:#fff;text-shadow:1px 1px 1px #000;max-width:180px;padding:15px;border-radius:10px;box-shadow:-1px -1px 1px #000,2px 2px 2px #000;display:none;}
</style>
<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>

<style type="text/css">
.mps{
      width:200px;
      height:60px;
      background:#777;
      position:fixed;
      top:0px;
      left:0px;
      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>

</head>
<body>
<div class="konten">
<div class="mps">
<input class="mps-x" type="text" id="cursorX" size="3"><input class="mps-y" type="text" id="cursorY" size="3"> 
</div>
<div class="bungkus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cFX_-l9e-ksZHJFLqFMkfNhbbGr26qQ4ZIY00ctk3K57eMcUtHICeDJAPFylfgCIJZ__6HTF8dfsJXj9gDudgR0eA3cnwQuj176X3n6cq-3QscNNPDsu7geDeEMJA7XEbznTztJWsbU/h250/romantic_moon.jpg" usemap="#darling"/>
</div>
<map name="darling">
<area shape="circle" coords="86,94,63" alt="cinta mati" href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank" title="Rembulan bersinar temaram... tersenyum melihat 2 anak manusia memadu kasih ... menyangsikan cinta ... dan menggombal ke pasangannya. Hiiii ... lucu liat tingkah dewa-dewi mabuk asmara..." />

 <area shape="rect" coords="195,178,205,250" alt="nafsu monyet" href="http://bestbloggermenus.blogspot.com" target="_blank" title="Belahlah dadaku, say... maka kau tak akan lagi banyak cing-cong!" />
 <area shape="rect" coords="176,185,190,250" alt="Sundongyang" href="http://gubhugreyot.blogspot.com" target="_blank" title="Tapi mengapa selama ini engkau tak pernah lagi menciumku?" />
  <area shape="circle" coords="195,166,10" alt="cinta mati" href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank" title="Sayang.... Aku sungguh mencintaimu! Biarlah rembulan di atas kita menjadi saksi betapa aku tulus mencintaimu!" style="background:green;" />
 <area shape="circle" coords="176,169,10" alt="darah muda" href="http://bestbloggerhack.blogspot.com" target="_blank" title="Mas..., apakah engkau sungguh2 mencintai aku?" />
</map>
</div>
</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

Displays the cursor position with javascript

Keterangan :

Tidak ada komentar:

Posting Komentar

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('8.16.2012');

Displays the cursor position with javascript

Keterangan :

Tidak ada komentar:

Posting Komentar

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e