MyBB Depo Forum

Orjinalini görmek için tıklayınız: CSS ile fare imlecini değiştirmek (Mouse Cursor)
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
Selamün Aleyküm, Bugün css kullanarak sitemizdeki fare imlecini nasıl değiştireceğimizi anşatmaya çalışacağım.

Fare imlecini değiştirmek istediğiniz yerde yazmanız gereken css kodu
PHP Kod:
cursor:hand
şeklindedir.

Bu css kodunun alacağı değerler şu şekildedir:

url
Bu değer ile kendi tasarladığımız .cur uzantılı imleci tanımlayabiliyoruz.
Kullanım şekli
PHP Kod:
cursor:url('ornek.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
PHP Kod:
cursor:default; 

hand
Genellikle link izlenimi veren el şekilli bu imleç, ziyaretçiyi sol tıklamaya güdüler.
Kullanım şekli
PHP Kod:
cursor:hand

crosshair
Ziyaretçiyi bir noktayı belirlemesi (nişan alması) yönünde güdüler.
Kullanım şekli
PHP Kod:
cursor:crosshair

pointer
Ziyaretçiyi bir noktayı göstermeye güdüler.
Kullanım şekli
PHP Kod:
cursor:pointer

move
Ziyaretçiyi bir şeyi tutup hareket ettirmeye güdüler.
Kullanım şekli
PHP Kod:
cursor:move

e-resize
Herhangi bir nesneyi doğuya doğru genişletmek için kullanılır.
Kullanım şekli
PHP Kod:
cursor:e-resize

ne-resize
Herhangi bir nesneyi kuzey doğuya doğru genişletmek için kullanılır.
Kullanım şekli
PHP Kod:
cursor:ne-resize

nw-resize
Herhangi bir nesneyi kuzey batıya doğru genişletmek için kullanılır.
Kullanım şekli
PHP Kod:
cursor:nw-resize

n-resize
Herhangi bir nesneyi kuzeye doğru genişletmek için kullanılır.
Kullanım şekli
PHP Kod:
cursor:n-resize

se-resize
Herhangi bir nesneyi güney doğuya doğru genişletmek için kullanılır.
Kullanım şekli
PHP Kod:
cursor:se-resize

sw-resize
Herhangi bir nesneyi güney batıya doğru genişletmek için kullanılır.
Kullanım şekli
PHP Kod:
cursor:sw-resize

s-resize
Herhangi bir nesneyi güneye doğru genişletmek için kullanılır.
Kullanım şekli
PHP Kod:
cursor:s-resize

w-resize
Herhangi bir nesneyi batıya doğru genişletmek için kullanılır.
Kullanım şekli
PHP Kod:
cursor:w-resize

text
Ziyaretçiyi yazı yazmaya güdüler.
Kullanım şekli
PHP Kod:
cursor:text

wait
Ziyaretçiye "bekle" der.
Kullanım şekli
PHP Kod:
cursor:wait

help
Ziyaretçiyi yardım almak için tıklamasını güdüler.
Kullanım şekli
PHP Kod:
cursor:help

Bu imleçlerden birini kullanabilirsiniz ancak kendi belirlediğimiz bir imleci koymak daha uygun olur bunun için googledan mouse cursors diye aratıp bir imleç seçerek aşağıdaki kodu kullanmalıyız.
PHP Kod:
cursor:url('ornek.cur'); 

Şimdi gelelim bu kodu nasıl kullanacağımıza. Faremizin tüm sitede belirlediğimiz şekilde olması için öncelikle belirlediğimiz imleci Ftp aracılığı ile images klasörüne yolluyoruz.(cur formatında olmalı) Sonra aşağıdaki adımları uyguluyoruz:
Admin Paneli >> Temalar & Şablonlar >> Kullandığımız tema >> global.css >> Gelişmiş Düzenleme
Bul:
PHP Kod:
body 

Değiştir:(imlec.cur u kendi imlec adınızla değiştirin)
PHP Kod:
body {
    
cursorurl(images/imlec.cur); 
Yani burada body kümesine
PHP Kod:
cursorurl(images/imlec.cur); 
satırını eklemiş olduk.

Linklerin üzerine gelince görünmesini istediğiniz imleci eklemek için global.css de
Bul:
PHP Kod:
a:hovera:active 
Değiştir:(imlec.cur u kendi imlec adınızla değiştirin)
PHP Kod:
a:hovera:active {
    
cursorurl(images/imlec.cur); 

Evet şimdi sitemizde fare imleci değişmiş oldu.

Ancak fare imlecinin tüm sitede değilde sadece belirlediğiniz bir alanda olmasını istiyorsanız global.css nin en altında şu şekilde bir küme oluşturun:
PHP Kod:
mouse_cursor {
    
cursorurl(images/imlec.cur);


Sonrada belirdediğiniz alanları şu div tagları içerisine alın:
PHP Kod:
<div id="mouse_cursor">
 
kodlar buraya
</div

Bu sayede belirlemiş olduğumuz alan üzerine geldiğimizde mouse imlecimiz değişecektir.

Veya aynı mantığı kullanarak div içerisine alınmış bir alanın css kodlarına
PHP Kod:
cursorurl(images/imlec.cur); 
kodunu eklememiz yeterli olacaktır.

Hayırlı çalışmalar.

Yararlanılan kaynaklar:
Kod:
http://www.sanalkurs.net/css-ile-fare-imlecini-degistirmek-mouse-cursor-1565.html
Paylaşım için teşekkürler.
Teşekkürler Süper
:GülümsemeUykuKızgın - SinirliSüperAglamak