Cara Mengubah Kursor Saat Melayang

Daftar Isi:

Cara Mengubah Kursor Saat Melayang
Cara Mengubah Kursor Saat Melayang

Video: Cara Mengubah Kursor Saat Melayang

Video: Cara Mengubah Kursor Saat Melayang
Video: Cara Mengganti Cursor mouse windows 10 pada komputer atau laptop tanpa instal 2024, November
Anonim

Beberapa elemen halaman web mengubah tampilannya saat mengarahkan mouse - ini secara default ditentukan oleh pengaturan bahasa HTML (HyperText Markup Language - "Hypertext Markup Language"). Bahasa ini memiliki alat yang memungkinkan Anda mengubah pengaturan yang sama untuk elemen halaman lainnya. Jika perlu, Anda dapat menggunakan CSS (Cascading Style Sheets) dan bahasa skrip JavaScript sisi klien untuk tujuan ini.

Cara mengubah kursor saat melayang
Cara mengubah kursor saat melayang

instruksi

Langkah 1

Gunakan atribut style untuk dapat mengatur variabel kursor di tag objek halaman web yang Anda minati. Misalnya, kode HTML dari bidang teks input yang menginstruksikan browser pengunjung untuk mengubah tampilan kursor dengan cara yang sama seperti saat mengarahkan kursor ke tautan, dapat ditulis seperti ini:

Langkah 2

Pilih tampilan kursor yang diinginkan dari daftar nilai yang valid untuk parameter kursor. Dalam contoh yang ditunjukkan pada langkah sebelumnya, nilai pointer digunakan - nilai tangan memiliki efek yang persis sama. Selain dua nilai ini, opsi berikut untuk tampilan kursor disediakan: crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, progress, s-resize, se-resize, sw-resize, teks, w -resize, tunggu. Misalnya, untuk membuat kursor terlihat seperti panah berkepala dua dari kiri atas ke kanan bawah dalam contoh kode di atas, gunakan nw-resize alih-alih penunjuk:

Huruf-huruf di depan nilai ubah ukuran membantu menentukan arah mana panah diarahkan oleh nilai ini - mereka, seperti pada kompas, sesuai dengan penunjukan titik mata angin. Misalnya, nw adalah singkatan dari nord-west (barat laut), s untuk selatan (selatan), dll.

Langkah 3

Gunakan URL file alih-alih nilai yang telah ditentukan sebelumnya jika Anda mengunggah gambar kursor Anda sendiri dalam format aslinya. Untuk melakukannya, gunakan sintaks berikut:

<input style = "kursor: url (https://someSite.ru/someCursor.cur) "/>

Jika file terletak di folder yang sama dengan halaman atau di subfolder, maka alih-alih alamat absolut, Anda dapat menentukan alamat relatif.

Langkah 4

Gunakan atribut onmouseover jika Anda ingin mengubah tampilan kursor menggunakan JavaScript. Sebagai contoh:

Kode ini akan bekerja persis seperti contoh di langkah kedua.

Direkomendasikan: