Bu yazıda web sayfanızın sıradan imlecini nasıl kişiselleştirebileceğinizi göreceksiniz. Höhhh “kişiselleştirebileceğinizi” ne kadar uzun bir kelime oldu öyle 🙂 Neyse, ayrıca sabit veya animasyonlu birçok imleç dosyasını ve adreslerini de sizlere sunacağım. Böylelikle imleç sıkıntınız da olmayacak. Hadi öyleyse alın kahvenizi, kolanızı elinize ve başlıyoruz.
Sıradan bir web sayfasının imleci, sizin bilgisayarınızda kullanmakta olduğunu geçerli imleç ve genellikle beyaz olan oktur. Fakat imleci değiştirilen bir siteyi ise tarif etmeyeceğim zira kendini belli edecektir 🙂
İmleç Çeşitleri
İmleçler sabit ve animasyonlu olmak üzere 2 çeşittir. Genellikle sabit imleçler .cur , animasyonlu imleçler .ani formatında olurlar. Ekleyeceğimiz imleçleri böyle ayırt edeceğiz.
Nasıl Eklenir
Özel imleç dosyaları sayfalara CSS dili kullanılarak eklenir. CSS günümüzde olmazsa olmaz sayfa stili programlama dilidir.
Kodları Nedir, Nereye Eklemeliyim
CSS çok esnek bir dildir. Tüm html etiketleri altında ayrı ayrı CSS kodlarını ekleyebileceğiniz gibi, bir etiket sınıfına genel tanımlamada yapabilirsiniz. Öncelikle mevcut imleç dosyanızı sitenizin altına yükleyin. Yüklediğiniz yerin sitenizin giriş dizini olduğunu varsayalım. (Böylelikle çağırılacak url: (imlec.cur|.ani) gibi olur.
CSS kodlarını sayfanız altına,
<head>
</head>
etiketleri arasına ekleyebilirsiniz. Benzer bir kullanım şöyle olur.
<HEAD>
<style type="text/css">
<!--
body {cursor: url('imlec.ani');}
-->
</style>
</HEAD>
Örneklerde adı geçecek olan “imlec.ani” ya da “imlec.cur” sizin seçtiğiniz imleç dosyasıdır ve adını sizinkiyle değiştirebilirsiniz. Buradaki kod tüm sayfada seçtiğiniz imleci gösterir. Eğer herhangi bir CSS Style dosyası kullanıyorsanız (örneğin style.css v.b.), onun içerisine ekleyeceğiniz kod,
body {cursor: url('imlec.ani');}
gibidir.
Bu uygulamalar ile sayfanızın imlecinin değiştiğine şahit olacaksınız. Fakat bağlantılar üstüne geldiğinizde eski imlecin tekrar görüneceğini göreceksiniz. İşte bu esnada yine CSS ile bağlantı etiketlerini ( yani ) özelleştireceğiz.
Mevcut CSS kodlarınızın bir satır altına,
a {cursor: url('imlec.ani');}
eklerseniz, bahsettiğim olayın ortadan kalktığını görürsünüz.
Daha da detaya inelim. Örneğin siz sadece bir bağlantı üstündeki imleci özelleştirmek istiyor olabilirsiniz.
O halde kullanımı,
<a href="test.html" style="cursor:url('imlec.cur')">Örnek Sayfa</a>
gibi olacaktır.
İşte bu kadar imleç özelleştirme de.Genel uygulamalar böyledir, diğer etiketler altına CSS tanımlamalarını da benzer şekilde yapabilirsiniz.
Bendeki sabit imleçler şurada ve animasyonlu imleç isterseniz de burada.