Her Çerçeveye Ayrı Cursor Atama

Her 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

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

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-12-23 tarihinde yayınlandı,Toplam 2329 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...