https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 1
  • 1
  • 2
  • 3
  • 4
  • 5
Üzerine Gelince Renk Değiştiren Buton Yapımı Anlatımı
#1
Öncelikle bir süre önce http://www.blackinci.com daki anlatımı okuyup öğrendiğim blackinci hocamıza ve CSS e başlamamı sağlayan ustam Baybars'a sonsuz teşekkürler..

Öncelikle mantığı biraz kavratmak istiyorum..
Elimizde örn; 120x60 px bir resim var, CSS kodlarını buna göre düzenlediğimizde boşken 120x30 px lik kısım gözükürken üstüne gelince 120x -30 px lik kısım görünecek..

Anlatıma geçelim..

Butonumuz şu şekilde olacak :
yenikonujb4.png

Öncelikle linkimizi verelim..
Kod:
<a href="yönlenecek link" class="yenikonu"></a>
Linkimizi verdik, şimdi CSS kodları..
Kod:
.yenikonu {
width: 120px;
height: 30px;
background: url(yenikonu.png) top left no-repeat;
float: right;
}
Sağa dayadık, genişliğini ve yüksekliğini ayarladık..
Kod:
a.yenikonu {
display: block;
width: 120px;
height: 30px;
background: url(yenikonu.png) top left no-repeat;
text-decoration: none;
}

block kodumuzu da ekledikten sonra son kodumuza geçiyoruz..
Kod:
a:hover.yenikonu {
background-position: 0 -30px;
text-decoration: none;
}

Bu Kadar Hak Ettiysem +Rep
Ara
Cevapla PGM
Teşekkür verenler:
#2
Nerye eklicez?
Ara
Cevapla PGM
Teşekkür verenler:
#3
Güzel Anlatım Saol Kardesim..
Ara
Cevapla PGM
Teşekkür verenler:
#4
Anlatım için teşekkürler.Ancak basit HTML kodu ile de yapılabilir:

PHP Kod:
onmouseout 
Normal buton


PHP Kod:
onmouseover 
Mouse üzerine gelince.

Kullanım şekli (Destek forumdaki kullanım):

PHP Kod:
<img onmouseout="this.src='http://st.10tl.net/tema/smeaqol/destek10tl/postbit/newreply1.png';" title="Yeni Cevap" alt="Yeni Cevap" onmouseover="this.src='http://st.10tl.net/tema/smeaqol/destek10tl/postbit/newreply2.png';" src="http://st.10tl.net/tema/smeaqol/destek10tl/postbit/newreply1.png"
GÖREVİNİ BIRAKTI
Önce AHLAK ve MANEVİYAT

Hakk’ın tesisi için çalışmamakla Batıl’ın hakimiyeti için çalışmak arasında fark yoktur.



Prof. Dr. Necmettin ERBAKAN


TÜM KONULARIM

Başaɾının içeɾiğindeki en önemli, biɾicik malzeme, insanlaɾla nasıl geçineceğini iyi bilmektiɾ. / Theodore Roosevelt
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi


Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping