Skip to content Skip to sidebar Skip to footer

Memahami Penggunaan Fungsi Onmouse (over,out,enter, dan move) Event pada Javascript

Memahami penggunaan fungsi onmouse event pada javascript
Pada artikel kali ini kita akan belajar cara penggunaan fungsi onmouseover dalam javascript yang sebelumnya kita telah mempelajari event onclik() dan change() pada artikel sebelumnya. Fungsi dari onmouseover() event pada javascript ini memberikan aksi tertentu pada sebuah element HTML saat mouse/pinter berada diatasnya.

Apabila anda sudah mempelajari CSS, aksi dari event ini mirip seperti :hover yang ada di CSS. Tapi fungsi menggunakan onmouseover ini lebih detail.


Cara Penggunaan Onmouseover Event Javascript

Perlu anda ketahui fungsi onmouse ini memiliki banyak variasi, yakni onmouseover, onmouseout, onmousemove, dan onmouseenter. Lalu bagaiman penjelasan dan perbedaanya ?

1. Onmouseover

fungsi onmouseover() ialah melalukan aksi (satu kali) ketika pointer menyorot pada sebuah element. Atau bisa menggunakan onmouseenter() juga memiliki fungsi yang sama.

Buat file .html, silahkan copy lalu jalankan program berikut.

Contoh program onmouseover :
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

<img src="https://i.ibb.co/LzkKNNF/hardifal-com.png" id="demo" onmouseover ="aksi()" width="50px" border="0">

 <script>
  function aksi(){
   document.getElementById('demo').style.width = "100px"  ;
  }
 </script>
</body>
</html>

Hasil :
gambar gif contoh program onmouseover event javascript
Pada contoh sederhana diatas, saya berikan sebuah aksi pada ukuran dengan .style.width = "100px". Anda juga bisa pakai aksi lainnya seperti warna style.color = "red" dsb.

2. Onmouseout

Sedangkan untuk onmouseout() memberikan aksi saat pointer keluar atau berpindah meninggalkan dari sorotan element.

Contoh program onmouseout
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>

<img src="https://i.ibb.co/LzkKNNF/hardifal-com.png" id="demo" onmouseout ="aksi()" width="100px" border="0">

 <script>
  function aksi(){
   document.getElementById('demo').style.width = "50px"  ;
  }
 </script>
</body>
</html>

Hasil :
Gambar gif contoh program onmouseout event javascript
Ini kebalikan dari onmouseover, yakni akan melakukan aksi jika sorotan mouse keluar dari element.

3. Onmousemove

Melalukan aksi saat mouse bergeser didalam sebauh element.

Contoh program fungsi onmousemove() :
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hardifal.com</title>
</head>
<body>


<div  id="demo" style="width: 50px; height: 50px; background-color: aqua; text-align: center;" onmousemove="aksi()">0</div>

 <script>
  var z = 0;
  function aksi(){
   document.getElementById('demo').innerHTML = z+=1 ;
  }
 </script>
</body>
</html>

Hasil :
gambar gif contoh program onmousemove event javascript

pada program sederhana diatas untuk contoh penggunaan fungsi nmousemove ini, saya berikan sebuah aksi (menambah nilai terus menerus) apabila mouse atau pointer bergerak dan bergeser selama didalam element html.

Sampai sinilah mengenal dan cara penggunaan fungis onmouse (over,out,enter, dan move)  event di javascript.

Pelajari juga event lainnya :

Post a comment for "Memahami Penggunaan Fungsi Onmouse (over,out,enter, dan move) Event pada Javascript"