Deteksi Mouse dengan JavaScript - Technology Tower

Pernahkah kamu datang ke sebuah situs web yang menjengkelkan karena enggak bisa klik kanan di halaman situs web itu? Masih mending kalau cuma klik kanan yang tidak bisa. Di situs web lain, sering muncul kotak dengan suatu teks. Kotak itu baru hilang kalau tombol OK diklik.

Hal tersebut bisa dilakukan karena JavaScript memiliki kemampuan untuk mendeteksi mouse. Nah, dengan mempelajari skrip pada edisi ini, kamu bisa “balas dendam” dengan membuat tombol klik-kanan menampilkan kotak dialog tertentu.

Deteksi Tombol

Contoh pertama yang akan diangkat adalah deteksi tombol mouse yang diklik. Contoh tersebut diberikan pada Listing 1. Jika listing tersebut dijalankan pada sebuah browser, cobalah klik tombol mouse. Terserah mau klik kiri atau klik kanan. Yang akan muncul adalah sebuah kotak dialog yang memberitahukan tombol yang kamu klik. Contoh kotak dialog tersebut ditampilkan pada Gambar 1.

Koordinat Mouse

Contoh kedua, yang disajikan pada Listing 2, menjelaskan cara menampilkan posisi mouse saat mouse digerakkan. Koordinat tersebut ditampilkan pada status bar. Perhatikan baik-baik cara penulisan skrip yang menggunakan huruf kapital dan huruf kecil.

Khusus untuk Firefox, ada sedikit “hacking” yang harus dilakukan agar skrip tersebut bisa berjalan dengan baik. Klik menu “Tools > Options”. Lalu pada kotak dialog yang muncul masuklah ke halaman “Content”. Pastikan opsi “Enable JavaScript” aktif dan klik tombol “Advanced” di sebelah kanan opsi tersebut. Aktifkan opsi “Change status bar text” (Gambar 2).

Setelah itu, restart Firefox, barulah skrip dapat berfungsi dengan baik.

Oh ya, skrip ini juga tidak dapat dieksekusi pada Google Chrome karena status barnya boleh dibilang tidak ada. Status bar Google Chrome hanya muncul pada saat-saat tertentu saja.

Deteksi Elemen

Contoh ketiga yang diberikan pada Listing 3 membahas mengenai bagian HTML yang diklik oleh mouse.

Pada Listing 3 tersebut dibuat sebuah halaman situs web yang mengandung beberapa elemen dan diberi fungsi tertentu untuk mendeteksi elemen mana yang diklik. Halaman web ditampilkan pada Gambar 3 dan bila kamu mengklik sesuatu, akan muncul kotak dialog yang kurang lebih tampak sepergi Gambar 4.

Gambar 3

Gambar 4

Perubahan Gambar

Contoh keempat adalah perubahan gambar bila mouse pointer dilewatkan di atas gambar tersebut. Untuk dapat menjalankan skrip tersebut, siapkan dua buah gambar. Disarankan kedua gambar tersebut memiliki ukuran lebar dan tinggi yang sama atau setidaknya mendekati sama.

Gantilah nama gambar yang terdapat pada Listing 4 dengan gambar yang kamu miliki. Setelah itu jalankan skrip pada browser dan lihat apa yang terjadi bila mouse pointer diletakkan di atas gambar tersebut.

Listing 1.

<html>
<head>
<title> JavaScript </title>
<script>
<!–
function tombol(event)
{
if (event.button==2)
{
alert(“kamu mengklik tombol kanan mouse”);
}
else
{
alert(“kamu mengklik tombol kiri mouse”);
}
}
//–>
</script>
</head>
<body>
Tuliskan apa saja di sini. <br />
<a href=”#”> Sebuah link juga </a>
</body>
</html>

Listing 2.

<html>
<head>
<title> JavaScript </title>
<script>
<!–
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = koordinat;
function koordinat(e) {
status= “x: ” + e.pageX + ” y: ” + e.pageY;
}
//–>
</script>
</head>
<body>
Gerakkan mouse dan pada status bar akan muncul koordinat mouse
</body>
</html>

Listing 3.

<html>
<head>
<title> JavaScript </title>
<script>
<!–
function elemen_apa(e)
{
var targ;
if (!e)
{
var e=window.event;
}
if (e.target)
{
targ=e.target;
}
else if (e.srcElement)
{
targ=e.srcElement;
}
if (targ.nodeType==3) // antisipasi bug pada Safari
{
targ = targ.parentNode;
}
var tname;
tname=targ.tagName;
alert(“kamu mengklik elemen ” + tname);
}
//–>
</script>
</head>
<body>
<p> Silakan klik pada suatu tempat di dokumen. </p>
<h3> Ini sebuah header </h3>
<p> Ini sebuah paragraf </p>
<a href=”#”> Ini sebuah link </a> <br />
<img src=”tuxerro.gif” />
<table border=”1″>
<tr>
<td> Pusing belajar JavaScript </td>
</tr>
</table>
</body>
</html>

Listing 4.

<html>
<head>
<title> JavaScript </title>
<script>
<!–
if (document.images)
{
image1 = new Image;
image2 = new Image;
image1.src = ‘tuxerro.gif’;
image2.src = ‘tuxerro-invert.gif’;
}
//–>
</script>
</head>
<body>
<a href=”http://tabloidpcplus.com/”
onMouseOver=”document.rollover.src=image2.src”
onMouseOut=”document.rollover.src=image1.src”>
<img src=”tuxerro.gif” border=0 name=”rollover”>
</a>
</body>
</html>

Deteksi Mouse dengan JavaScript

Deteksi Mouse dengan JavaScript - Technology Tower

Pengikut

Arsip Blog

Label

Tutorial Blogging