Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Efek Ketika Menggerakkan Mouse HTML Menggunakan Atribut OnMouseMove

Dipublikasikan Oleh: elfanmauludi 7 komentar
Atribut event onmousemove pada html dapat diaktifkan ketika pointer digerakkan menuju ke arah elemen yang memiliki atribut tersebut.


Sebelum memahami lebih dalam materi tentang Efek Ketika Menggerakkan Mouse HTML Menggunakan Atribut OnMouseMove, terlebih dahulu pelajari materi tentang: Efek Ketika Melakukan Double Klik HTML Menggunakan Atribut onDblClick, Efek Ketika Melakukan Klik HTML Menggunakan Atribut OnClick, dan Efek Setelah Menekan Tombol HTML Menggunakan Atribut OnKeyUp.

Tag Pendukung: Penggunaan atribut onmousemove didukung penggunaannya oleh segala jenis elemen pada html, kecuali.
  • <base>
  • <bdo>
  • <br>
  • <head>
  • <html>
  • <iframe>
  • <meta>
  • <param>
  • <script>
  • <style>
  • <title>

Sintak: <element onmousemove = "script">

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

atribut event onmousemove

</title>

</head>

 

<body>

<center>

 

<h2>

atribut event onmousemove

</h2>

 

<img 

onmousemove="bigSize(this)" 

onmouseout="normalSize(this)"

border="1px solod black" 

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhENua-O5B-3hL8g8uAM6H8fkJesbn2l-ykKs_0BeTQcNyhzMJXUFStSxA2Bc9DZ7pkzKxm1yW1r0cl4GbNP-Ajc6R8XyGG5QQ2M2lFlKF49PNR7TWuBc_qxUPm-lWqcJxGHREQkbSt98Y/s35/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="mkn" 

width="300" 

height="100">

 

<script>

function bigSize(val) 

{

val.style.height = "200px";

val.style.width = "600px";

}

 

function normalSize(val) 

{

val.style.height = "100px";

val.style.width = "300px";

}

</script>

 

</center>

</body>

 

</html>


Penggunaan atribut onmousemove dalam HTML memberikan dampak yang menarik dalam pengalaman pengguna pada sebuah halaman web. Atribut ini memungkinkan pengembang web untuk merespons gerakan kursor mouse dengan cara yang dinamis dan interaktif. Ketika kursor mouse digerakkan di atas elemen halaman web yang telah diterapkan atribut tersebut, berbagai efek dapat dihasilkan sesuai dengan apa yang diinginkan oleh pengembang. Penggunaan atribut onmousemove tidak hanya terbatas pada memberikan perubahan visual semata, tetapi juga membuka peluang bagi pengembang untuk membuat interaksi lebih kompleks dan menarik.

Salah satu efek yang dapat timbul dari penggunaan atribut onmousemove adalah perubahan visual yang terjadi pada elemen tertentu ketika kursor bergerak di atasnya. Misalnya, latar belakang elemen dapat berubah warna atau elemen tersebut dapat bergerak mengikuti pergerakan kursor. Efek seperti ini menambah daya tarik visual yang dapat meningkatkan kenyamanan dan kepuasan pengguna saat berinteraksi dengan halaman web. Sebuah halaman yang dinamis dan responsif akan terasa lebih hidup dan mengundang rasa ingin tahu pengguna untuk menjelajah lebih jauh.

Tidak hanya itu, atribut onmousemove juga memberikan kesempatan untuk memperkenalkan elemen-elemen baru yang muncul berdasarkan gerakan kursor. Misalnya, teks atau gambar yang sebelumnya tersembunyi dapat muncul secara perlahan saat kursor mendekat. Efek seperti ini mengundang interaksi pengguna dan dapat digunakan untuk menampilkan informasi tambahan tanpa harus memenuhi halaman dengan elemen-elemen yang dapat mengganggu. Dengan cara ini, pengunjung situs dapat lebih fokus pada konten yang relevan tanpa merasa kewalahan dengan banyaknya informasi yang muncul secara bersamaan.

Selain perubahan visual, atribut onmousemove juga memungkinkan pengembangan efek animasi yang dapat meningkatkan kesan interaktif pada halaman web. Pengguna dapat merasakan elemen-elemen yang ada pada halaman web seperti bergerak atau berubah bentuk seiring pergerakan mouse. Animasi ini dapat memanfaatkan transisi yang halus untuk menciptakan pengalaman yang menyenangkan. Penggunaan animasi yang mengikuti pergerakan mouse juga memberikan kesan responsif terhadap tindakan pengguna, membuat halaman terasa lebih intuitif dan menyenangkan.


Ketika kursor bergerak melintasi berbagai elemen yang telah ditentukan, pergerakan tersebut juga dapat dimanfaatkan untuk memperkenalkan aspek visual yang lebih kompleks, seperti perubahan ukuran elemen atau perubahan opasitas yang bertahap. Dengan memberikan umpan balik visual yang jelas, pengunjung situs menjadi lebih paham mengenai interaktivitas yang ada di halaman tersebut. Efek-efek ini memungkinkan pengguna untuk merasakan keterhubungan yang lebih baik dengan elemen-elemen yang ada di halaman web, menjadikan interaksi lebih lancar dan lebih alami.

Tidak hanya efek visual, penggunaan atribut onmousemove juga bisa berhubungan dengan elemen-elemen fungsional, seperti menu navigasi. Dengan memanfaatkan gerakan kursor, menu dapat muncul dengan animasi atau memperluas submenu ketika kursor berada di atas area tertentu. Hal ini memberikan kenyamanan tambahan bagi pengguna dalam mengakses berbagai fitur atau bagian halaman tanpa harus mencari-cari atau mengklik terlalu banyak untuk menemukan apa yang dicari. Efek ini mempermudah pengguna dalam menavigasi halaman dan menjadikan penggunaan situs lebih efisien.

Dalam konteks desain antarmuka, atribut onmousemove juga dapat digunakan untuk memberikan umpan balik yang lebih responsif terhadap input pengguna. Misalnya, elemen-elemen tombol atau ikon dapat memberikan efek perubahan warna atau pergeseran posisi secara halus saat kursor berada di atasnya. Umpan balik visual ini memberikan kesan bahwa elemen-elemen tersebut aktif dan dapat diklik, serta mengurangi kebingungan pengguna dalam menentukan bagian halaman yang dapat diinteraksi. Hal ini meningkatkan interaktivitas dan mengarah pada pengalaman pengguna yang lebih menyenangkan.

Namun, penggunaan atribut onmousemove harus dilakukan dengan hati-hati, karena terlalu banyak efek atau interaksi yang berlebihan dapat mengganggu kenyamanan pengguna. Meskipun efek-efek ini dapat meningkatkan daya tarik visual, apabila tidak diterapkan dengan bijaksana, hal ini bisa membuat halaman terasa berlebihan atau malah membingungkan. Keberhasilan dari penggunaan atribut ini terletak pada seberapa baik efek yang diterapkan dapat mendukung tujuan halaman dan memperkaya pengalaman pengguna tanpa menimbulkan gangguan atau kebingungan. Oleh karena itu, penting untuk memperhatikan proporsi dan konteks penggunaan efek berdasarkan kebutuhan dan desain keseluruhan dari halaman web.

Pada sisi teknis, implementasi atribut onmousemove dapat mempengaruhi kinerja halaman web, terutama jika efek yang diterapkan terlalu rumit atau memerlukan banyak sumber daya. Setiap pergerakan kursor akan memicu eksekusi skrip atau perubahan elemen yang telah ditentukan, yang dapat menambah beban pada perangkat pengunjung situs. Oleh karena itu, pengembang harus memastikan bahwa efek yang diterapkan tetap ringan dan tidak memperlambat kinerja halaman, terutama pada perangkat dengan spesifikasi yang lebih rendah.

Efek-efek yang dihasilkan dari atribut onmousemove juga dapat digunakan untuk tujuan yang lebih fungsional, seperti pengembangan alat atau aplikasi berbasis web. Sebagai contoh, aplikasi gambar atau desain dapat memanfaatkan pergerakan mouse untuk menggambar atau merubah elemen-elemen desain. Pengguna dapat menggambar atau membuat perubahan desain secara langsung hanya dengan menggerakkan kursor di atas kanvas. Hal ini meningkatkan interaktivitas aplikasi, memberikan pengunjung kebebasan untuk berkreasi tanpa memerlukan tindakan klik yang lebih rumit.

Sebagai tambahan, penggunaan atribut onmousemove dalam pengembangan halaman web dapat mengarah pada pengenalan konsep-konsep baru dalam desain antarmuka yang lebih berfokus pada interaktivitas. Dengan memahami dan memanfaatkan atribut ini, pengembang dapat menciptakan pengalaman yang lebih personal dan responsif, memberikan ruang bagi pengguna untuk merasa lebih terhubung dengan konten yang ada di halaman web. Atribut ini juga memungkinkan pengembang untuk menyesuaikan elemen-elemen halaman secara real-time, menciptakan pengalaman yang lebih imersif bagi pengunjung situs.

Secara keseluruhan, atribut onmousemove merupakan alat yang sangat berguna dalam pengembangan halaman web yang interaktif dan responsif. Efek yang dihasilkan dari penggunaan atribut ini tidak hanya terbatas pada perubahan visual yang menarik, tetapi juga membuka kesempatan untuk menciptakan interaksi yang lebih mendalam antara pengguna dan halaman web. Dengan penerapan yang tepat, penggunaan atribut ini dapat memberikan dampak positif pada pengalaman pengguna, meningkatkan kenyamanan dan efisiensi dalam berinteraksi dengan situs, serta memberikan kesempatan bagi pengembang untuk menambahkan elemen-elemen baru yang memperkaya halaman web.

Artikel ini akan dibaca oleh: Fadhiya Andini Maula, Fadilla Barochatul Subekti, Fajar Wahyu Pratama, Ghea Hayudhanti, dan Haffid Rizki Pangestu.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

7 komentar untuk "Efek Ketika Menggerakkan Mouse HTML Menggunakan Atribut OnMouseMove"

  1. AnonimSelasa, 12 Oktober 2021 pukul 07.12.00 WIB

    Browser apa saja yang mendukung penggunaan atribut onmousemove pada elemen html?

    BalasHapus
  2. AnonimSelasa, 12 Oktober 2021 pukul 07.14.00 WIB

    Apa yang dimaksud dengan atribut onmousemove pada elemen html?

    BalasHapus
    Balasan
    1. AnonimSelasa, 12 Oktober 2021 pukul 07.14.00 WIB

      Atribut onmousemove merupakan atribut yang diaktifkan ketika pointer bergerak ketika berada diatas elemen.

      Hapus
    2. AnonimSelasa, 12 Oktober 2021 pukul 07.15.00 WIB

      Properti onmousemove dari mixin GlobalEventHandlers merupakan event handler yang memproses event mousemove, yang akan aktif ketika pengguna menggerakkan mouse-nya ke elemen yang memiliki atribut tersebut.

      Hapus
  3. AnonimSelasa, 12 Oktober 2021 pukul 07.16.00 WIB

    Kapan event onmousemove dapat dinonaktifkan?

    BalasHapus
    Balasan
    1. AnonimSelasa, 12 Oktober 2021 pukul 07.16.00 WIB

      Ketika pointer digerakkan keluar dari elemen yang memiliki atribut event onmousemove, maka atribut tersebut kemudian menjadi tidak aktif.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -