CSS ile Fare İmlecini Değiştirmek (Mouse Cursor)

stigmata

Süper Üye
Kullanıcı
Katılım
4 Nis 2013
Mesajlar
3,264
[size=x-large]CSS ile Fare İmlecini Değiştirmek (Mouse Cursor).
[/size]Web sayfalarında CSS kullanarak fare imlecini değiştirebilirsiniz. Bunun
için ilk olarak fare imlecinin nerede değişmesi gerektiğini
belirlemeniz gerekiyor.
Not: Eğer tüm sayfada değişmesini istiyorsanız bunun için <body> tagını kullanmanız gerekiyor.
Fare imlecini değiştirmek istediğiniz yerde yazmanız gereken kod ise
style="cursor:hand;" şeklindedir. Örneğin tüm sayfada mouse imlecinin el
şeklinde gözükmesi için <body> tagını aşağıdaki gibi yazmanız
gerekiyor.
<body style="cursor:hand;">
CSS cursor özelliğinin alabileceği değerler aşağıdaki gibidir:

url
Bu değer ile kendi tasarladığımız .cur uzantılı imleci tanımlayabiliyoruz.
Kullanım şekli <img style="cursor:url('sat.cur');" />

default
Varsayılan değer bildiğimiz ok şekli imleç. Değiştirdiğimiz imleçten varsayılan değere dönmek için sıkça kullanılır.
Kullanım şekli <img style="cursor:default;" />

hand

Genellikle link izlenimi veren el şekilli bu imleç, ziyaretçiyi sol tıklamaya güdüler.
Kullanım şekli <img style="cursor:hand;" />

crosshair
Ziyaretçiyi bir noktayı belirlemesi (nişan alması) yönünde güdüler.
Kullanım şekli <img style="cursor:crosshair;" />

pointer
Ziyaretçiyi bir noktayı göstermeye güdüler.
Kullanım şekli <img style="cursor
ointer;" />


move
Ziyaretçiyi bir şeyi tutup hareket ettirmeye güdüler.
Kullanım şekli <img style="cursor:move;" />

e-resize
Herhangi bir nesneyi doğuya doğru genişletmek için kullanılır.
Kullanım şekli <img style="cursor:e-resize;" />

ne-resize
Herhangi bir nesneyi kuzey doğuya doğru genişletmek için kullanılır.
Kullanım şekli <img style="cursor:ne-resize;" />

nw-resize
Herhangi bir nesneyi kuzey batıya doğru genişletmek için kullanılır.
Kullanım şekli <img style="cursor:nw-resize;" />

n-resize
Herhangi bir nesneyi kuzeye doğru genişletmek için kullanılır.
Kullanım şekli <img style="cursor:n-resize;" />

se-resize
Herhangi bir nesneyi güney doğuya doğru genişletmek için kullanılır.
Kullanım şekli <img style="cursor:se-resize;" />

sw-resize
Herhangi bir nesneyi güney batıya doğru genişletmek için kullanılır.
Kullanım şekli <img style="cursor:sw-resize;" />

s-resize
Herhangi bir nesneyi güneye doğru genişletmek için kullanılır.
Kullanım şekli <img style="cursor:s-resize;" />

w-resize
Herhangi bir nesneyi batıya doğru genişletmek için kullanılır.
Kullanım şekli <img style="cursor:w-resize;" />

text
Ziyaretçiyi yazı yazmaya güdüler.
Kullanım şekli <img style="cursor:text;" />

wait
Ziyaretçiye "bekle" der.
Kullanım şekli <img style="cursor:wait;" />

help
Ziyaretçiyi yardım almak için tıklamasını güdüler.
Kullanım şekli <img style="cursor:help;" />
 
Üst Alt