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:pointer;" />
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;" />