Nilai Properti Cursor Untuk Mengganti Tampilan Kursor

Mengganti Tampilan kursor dengan gambar dan macam nilai properti cursor untuk mengganti tampilan kursor

Nilai Properti Cursor Untuk Mengganti Tampilan Kursor

Nilai Properti Cursor Untuk Mengganti Tampilan Kursor - Properti Cursor Untuk Mengganti Tampilan Kursor - Halnya pada suatu sistem operasi, tampilan kursor akan berubah sesuai fungsinya dan dapat diganti dengan bentuk yang sesuai dengan keinginan, begitupun pada web atau blog, tampilan kursor bisa kita kustomisasi sesuai dengan kebutuhan walaupun umumnya sama dengan yang ada pada suatu sistim operasi atau aplikasi bersangkutan.

Mengganti tampilan kursor dengan gambar

Dibawah ini merupakan Nilai dari Properti Cursor yang bisa digunakan untuk web atau blog, termasuk tampilan nilai untuk Kursor Dengan Tampilan Icon Gambar.

Nilai Properti Cursor


auto
crosshair
default
help
move
e-resize
n-resize
ne-resize
nw-resize
s-resize
w-resize
se-resize
sw-resize
pointer
progress
text
wait
url

Integrasi Pada Web atau Blog


Secara umum bisa menggunakan properti cursor tersebut pada tag body untuk mengganti nilai kursor web/blog, atau kita juga bisa mengkustom sendiri dengan mengganti tampilan kursor untuk bagian-bagian tertentu.

body {
cursor: pointer;
}

Tidak berbeda penerapannya jika kita ingin merubah tampilan kursor dengan sebuah icon gambar, yang membedakan hanya kita perlu mempunyai sebuah gambar untuk dijadikan sebagai icon untuk menggantikan tampilan kursor.

Mengganti Kursor Dengan Icon Gambar


Untuk mengganti tampilan kursor dengan icon gambar, sebelumnya kita mesti punya sebuah gambar untuk dijadikan pengganti tampilan kursor, gambar bisa berjenis file gif, jpeg ataupun png.

Anggap saja sudah memiliki gambar untuk dijadikan pengganti tampilan kursor, setelah di upload tentunya mempunyai alamat gambar tersebut, untuk penerapanya sama seperti pada cara diatas, cuma kita memilih url untuk memanggil gambar tersebut, seperti dibawah ini:

body {
  cursor: url(alamat gambar);
}

atau menambahkan nilai properti cursor dengan nilai auto

body {
  cursor: url(alamat gambar),auto;
}

Dengan penambahan nilai properti untuk cursor dengan nilai auto supaya tampilan kursor berganti default jika mengarah kebagian tertentu, dan untuk menanggulangi pengguna browser Opera (sampai opera 12) dan Safari 3 karena belum support untuk tampilan kursor dengan url (gambar).

Membuat gambar kursor untuk mengganti tampilan kursor bagi yang pandai dalam hal applikasi gambar tentunya tidaklah suatu kendala, tapi bagi saya pribadi untuk membuat sebuah gambar sederhana saja walah ampun dah susah banget, mungkin kita bertanya dimana situs penyedia gambar-gambar icon untuk sebuah kursor atau adakah situs layanan penyedia gambar untuk mengganti tampilan kursor dengan berbagai pilihan?

No comments:

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin