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
ş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
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
hand
Genellikle link izlenimi veren el şekilli bu imleç, ziyaretçiyi sol tıklamaya güdüler.
Kullanım şekli
crosshair
Ziyaretçiyi bir noktayı belirlemesi (nişan alması) yönünde güdüler.
Kullanım şekli
pointer
Ziyaretçiyi bir noktayı göstermeye güdüler.
Kullanım şekli
move
Ziyaretçiyi bir şeyi tutup hareket ettirmeye güdüler.
Kullanım şekli
e-resize
Herhangi bir nesneyi doğuya doğru genişletmek için kullanılır.
Kullanım şekli
ne-resize
Herhangi bir nesneyi kuzey doğuya doğru genişletmek için kullanılır.
Kullanım şekli
nw-resize
Herhangi bir nesneyi kuzey batıya doğru genişletmek için kullanılır.
Kullanım şekli
n-resize
Herhangi bir nesneyi kuzeye doğru genişletmek için kullanılır.
Kullanım şekli
se-resize
Herhangi bir nesneyi güney doğuya doğru genişletmek için kullanılır.
Kullanım şekli
sw-resize
Herhangi bir nesneyi güney batıya doğru genişletmek için kullanılır.
Kullanım şekli
s-resize
Herhangi bir nesneyi güneye doğru genişletmek için kullanılır.
Kullanım şekli
w-resize
Herhangi bir nesneyi batıya doğru genişletmek için kullanılır.
Kullanım şekli
text
Ziyaretçiyi yazı yazmaya güdüler.
Kullanım şekli
wait
Ziyaretçiye "bekle" der.
Kullanım şekli
help
Ziyaretçiyi yardım almak için tıklamasını güdüler.
Kullanım şekli
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.
Ş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:
Değiştir:(imlec.cur u kendi imlec adınızla değiştirin)
Yani burada body kümesine
satırını eklemiş olduk.
Linklerin üzerine gelince görünmesini istediğiniz imleci eklemek için global.css de
Bul:
Değiştir:(imlec.cur u kendi imlec adınızla değiştirin)
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:
Sonrada belirdediğiniz alanları şu div tagları içerisine alın:
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
kodunu eklememiz yeterli olacaktır.
Hayırlı çalışmalar.
Yararlanılan kaynaklar:
Fare imlecini değiştirmek istediğiniz yerde yazmanız gereken css kodu
PHP Kod:
cursor:hand;
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 {
cursor: url(images/imlec.cur);
PHP Kod:
cursor: url(images/imlec.cur);
Linklerin üzerine gelince görünmesini istediğiniz imleci eklemek için global.css de
Bul:
PHP Kod:
a:hover, a:active {
PHP Kod:
a:hover, a:active {
cursor: url(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 {
cursor: url(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:
cursor: url(images/imlec.cur);
Hayırlı çalışmalar.
Yararlanılan kaynaklar:
Kod:
http://www.sanalkurs.net/css-ile-fare-imlecini-degistirmek-mouse-cursor-1565.html