Her Çerçeveye Ayrı Cursor Atama

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.

————————————————————————————-

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 */
}