Css ile her çerçeveye yada başka deyişle her dive ayrı ayrı mouse yani cursor şekli atamak mümkün. Örneğin devre dışı bırakılmış bir link ve butonun çalışmadığını yada tıklanamayacağını belirtmek amacıyla farklı mouse şekilleri belirleyebilirsiniz web sitenizde. Bunun gibi bir sürü cursor şekli mevcut. Aşağıda 1 den 16 ya kadar sıraladığım başlıklar css ile hazırlanmış çerçevelere yada div lere cursor şekli atamak için her ayrı cursor şekline verilen isimdir. Siz de aşağıdaki kodları div içine atayıp özel cursor belirleyebilirsiniz.
1. Default
2. Auto
3. Pointer
4. Text
5. Wait
6. Help
7. Crosshair
8. Move
9. Resize North
10. Resize North East
11. Resize East
12. Resize South East
13. Resize South
14. Resize South West
15. Resize West
16. Resize North West
Biraz ingilizce bilgisi olan arkadaşlar fark etmiştir belki resize olanların şekilleri aynı sol alttan sağ üste uzanan ok iki yönlü ok işaret yada sağ alttan sol üste, sağa sola uzanan iki yönlü ok işareti ve aşağı yukarı iki yönlü ok işaretleri anlamındadırlar.
Daha açıklayıcı olur diye birde resim ekledim aşağıda örnek bir resim mevcut.
her cerceveye ayri cursor (mouse şekli) atama | mintik.com
————————————————————————————-
Css her cerceveye ayri ayri cursor atama için aşağıdaki adresten demolara ve gerekli kodlara ulaşabilirsiniz. Yanlız hazırladığım demolarda auto ve default ile hazırlanmış çerçeve normal mouse görünümündedir çalışmıyor diye püflemeyin sonra : )
Aşağıdaki demo adresine tıklayarak yönleneceğiniz sayfanın en üstünde reklam alanının hemen altında en büyük turuncu bir alan içerisinde css kodların her birinin ne işe yaradığı ve nasıl kullanılacağı hakkında detaylı olarak açıklama yaptım.
Örnek Css Kodu:
.ana_cerceve {width: 1024px;} /* ana cercevemiz eni 1024 px yukseklik yazilmadigi icin auto olarak geciyor
iceriginize gore yukseklik gosterecektir. */
.cursur_ornek { background-color: #f0f; /* cercevenin arka plan rengi */
cursor: ornek; /* cerceve alaninda gecerli olacak cursor sekli
ornek yazan yere auto default pointer text wait help crosshair move n-resize e-resize ne-resize se-resize s-resize
sw-resize w-resize nw-resize kelimelerinden herhangi bir tanesini yazarsaniz cerceve alani atadiginiz
css fonksiyonuna gore sekil alacaktir */
width: 250px; /* cerceve genisligi */
height: 250px; /* cerceve yuksekligi */
float: left; /* cercevenin alt altami yada yan yana mi olacagini bu kisimda ayarlayabilirsiniz
eger float left kismini silerseniz cerceveler yan yana degilde alt alta siralanacaktir */
}
