+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: MyBB 1.6 Depo (https://mybbdepo.com/mybb-1-6-depo-forumu)
+--- Forum: MyBB 1.6 Modifikasyon & Eklenti Deposu (https://mybbdepo.com/mybb-1-6-modifikasyon-eklenti-deposu-forumu)
+---- Forum: Diğer Eklentiler (https://mybbdepo.com/diger-eklentiler-forumu)
+---- Konu Başlığı: CSS ile fare imlecini değiştirmek (Mouse Cursor) (/css-ile-fare-imlecini-degistirmek-mouse-cursor-konusu.html)
CSS ile fare imlecini değiştirmek (Mouse Cursor) - 007combatant - 05-06-2012
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
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.htmlCvp: CSS ile fare imlecini değiştirmek (Mouse Cursor) - Trinstudedx - 06-06-2012
Paylaşım için teşekkürler.
Cvp: CSS ile fare imlecini değiştirmek (Mouse Cursor) - Ertanbnm - 18-09-2013
Teşekkürler
Cvp: CSS ile fare imlecini değiştirmek (Mouse Cursor) - fghfgh - 13-01-2014
:
