Kandungan
- Kursor Tetikus Asas
- Kursor Tetikus Tersuai
- Mengubah gaya kursor dengan Inline Javascript
- Bermain dengan fungsi
Menukar kursor tetikus adalah cara mudah untuk menambah kesan khas ke halaman web anda. Ini dapat meningkatkan kebolehgunaan dengan menyediakan pengguna dengan bantuan visual tambahan, terutama pada halaman yang lebih kompleks seperti permainan dan peta interaktif. Anda boleh menggunakan Javascript untuk menukar gaya kursor mengikut tarikh, cuaca dan apa sahaja. Teknik menggunakan Javascript, HTML dan CSS untuk membuat laman web dinamik dikenali sebagai DHTML (HTML Dynamic).
Kursor Tetikus Asas
Terdapat beberapa kursor tetikus standard yang boleh digunakan dengan mengubah gaya elemen atau badan halaman. Nama-nama adalah lalai, melintang, tangan, bergerak, teks, tunggu, dan bantuan. Lihat pautan "Properties CSS Kursor" di bahagian "Sumber" untuk maklumat lanjut mengenainya. Gunakan CSS untuk menentukan kursor yang akan dipaparkan apabila melepasi elemen seperti berikut:
Rambut salib
Kursor Tetikus Tersuai
Sebagai tambahan kepada kursor asas, anda boleh menggunakan template tersuai dengan menetapkan alamat fail imej sebagai gaya kursor, seperti dalam contoh berikut:
Kursor tersuai
Tidak semua penyemak imbas menyokong ciri ini atau semua jenis fail. Sebagai contoh, Internet Explorer mengharapkan fail dengan sambungan ".cur" atau ".ani". Firefox tidak menerima kursor animasi (".ani") dan menjangka kursor asas di luar imej. Untuk hasil terbaik, tunjukkan fail kursor (".cur" atau ".ani"), fail imej (PNG, JPEG atau GIF) dan jenis kursor asas sebagai sandaran. Contoh berikut menggunakan kursor animasi sebagai pilihan pertama, fail mudah di tempat kedua, dan kursor asas sebagai pilihan terakhir. Penyemak imbas akan mencuba semua pilihan sehingga anda dapat mencari yang anda boleh gunakan:
Kursor tersuai
Perpustakaan Open Cursor dalam bahagian Resources menawarkan koleksi kursor tetikus percuma.
Mengubah gaya kursor dengan Inline Javascript
Anda boleh menukar gaya CSS kursor menggunakan Javascript. Terdapat beberapa atribut HTML yang berkaitan dengan tindakan tetikus yang boleh digunakan untuk melaksanakan kod dengan mengklik, bergerak, atau melayang di atas elemen halaman. Beberapa contoh adalah:
onmouseover: Penunjuk tetikus melewati elemen. onmousedown: Butang tetikus ditekan. onmouseup: Butang tetikus dilepaskan. onmouseout: Petunjuk tetikus keluar dari elemen. ondblclick: Pengguna mengklik dua tetikus.
Di bahagian "Sifat" dalam bahagian "Sifat", anda akan menemui lebih banyak atribut yang boleh anda gunakan untuk menambah tindakan dengan Javascript.
Tambah tindakan ke acara (misalnya "tetikus") dengan menetapkan kod yang anda mahu jalankan sebagai nilai atribut. Dalam contoh di bawah, kursor akan berubah menjadi "membantu" dengan melayang di atas pautan.
Bantuan
Bermain dengan fungsi
Kadang-kadang, anda akan mahu melakukan lebih daripada satu sifat yang membolehkan. Dengan menulis semua tindakan dalam fungsi Javascript, anda boleh meletakkan semua kod di bahagian atas dokumen HTML anda dan memohon kepada elemen apa pun dengan membuat panggilan dalam atribut peristiwa. Kod berikut mengubah kursor pada elemen yang diluluskan sebagai parameter "el":
fungsi setElementCursor (el) {el.style.cursor = "url (3DArrow.cur), crosshair" GO}
Fungsi ini akan berada di bahagian skrip pengepala dokumen (di antara tag
dan ) atau dalam fail kod luaran yang dirujuk di bahagian yang sama. Untuk menggunakannya, panggil fungsi dengan kata kunci "ini" dari atribut acara dalam tag HTML. Fungsi ini akan menerima rujukan kepada elemen yang berkaitan dengan acara tetikus dan akan mengubah gaya kursor. Sebagai contoh, jika penunjuk melangkau teks berikut, kursor berubah:Kursor akan berubah pada pautan ini
Anda juga boleh menukar kursor utama yang akan dipaparkan apabila melayang di bahagian bawah halaman. Fungsi berikut akan membolehkan anda menukar kursor ke jenis yang ditunjukkan dalam parameter "curtype":
function setMainCursor (curtype) {switch (curtype) {case "loading": document.body.style.cursor = "url (working.ani), url (working.png), wait"; memecahkan kes GO "dilarang": document.body.style.cursor = "url (tidak tersedia.ani), url (tidak tersedia.png), lalai"; Pecah GO case "default": default: document.body.style.cursor = "url (arrow.cur), default" GO}}
Untuk menggunakannya, panggil ia "memuatkan", "dilarang" atau "lalai" daripada atribut acara dalam tag HTML. Sebagai contoh, butang berikut akan mengubah kursor ke "memuatkan" apabila diklik:
Bahasa Javascript mempunyai fungsi yang tidak terhad. Kod di bawah akan dikira dan setiap saat akan mengubah kursor tetikus ke imej yang dikaitkan dengan nilai semasa. Fungsi "setTimeOut" akan meninggalkan fungsi yang digantung selama satu saat sebelum dipanggil semula dan mengemas kini kaunter.
fungsi doCountdownCursor (count) {document.body.style.cursor = "url (" + count + ".ani), url (" + count + ".png) {setTimeout ("doCountdownCursor (" + count + ")", 1000) GO} else {document.body.style.cursor = "url (arrow.cur), default" GO}}
Pada halaman web, gunakan fungsi untuk memaparkan kiraan pada kursor tetikus apabila anda mengklik butang pada borang.