http://www.netgazi.tr.gg/

Açılış Sayfası Yapın Sık Kullanılanlara Ekleyin E-Mail Yollayın

www.netgazi.tr.gg ANASAYFAMIZA GİTMEK İÇİN TIKLA             İLETİŞİM           Z.DEFTERİ          SOHBET ODAM          CSS KODLARI           TÜM KODLARIMIZ



CSS ile Basit Şekilde...

Fatih Hayrioğlu anlatımıdır
CSS ile Basit Şekilde Fare Üzerine Gelince(Rollover) Resim Değişimi Yapmak

Daha önce bu konuya Resimli Menüler kısmında anlatmıştım, ama orada yapı daha karışık olduğu için anlaşılması ve basit uygulamalara uyarlanması konusunda sıkıntılar oluyordu. Bu işi daha basit bir örnek yardımı ile yapıp daha anlaşılır yapmak için beraber bir örnek yapalım.

Tek resimde işi halletmemiz, resmin sayfa yüklenmesinden önce yüklenmesi sebebiyle fare üzerine geldiğinde herhangi bir resim yükleme işlemini beklemediğimiz için daha akıcı olduğu gibi avantajlarını olduğunu daha önce anlatmıştık.

İlk olarak fare imlecinin üzerine geldiğinde değişecek resmin her iki hali yanyana gelecek şekilde yan yana veya alt alta gelecek şekilde tek resim olarak hazırlıyoruz(aradaki çizgiyi iki resim arasındaki ayrımı göstermek için koydum, normal resimde bu olmayacak)

anasayfaya dön

Xhtml kodumuzu yazalım

  1. <a class="anasayfayaDon" href="anasayfa.htm">Ana Sayfaya Dön</a>  

CSS kodumuzu yazalım

  1. a.anasayfayaDon {   
  2.     displayblock;   
  3.     width80px;   
  4.     height80px;   
  5.     backgroundurl(images/degisen_resim.gif) 0 0 no-repeat;   
  6.     text-decorationnone;   
  7.     text-indent:-999px;   
  8. }   
  9.   
  10. a:hover.anasayfayaDon {   
  11.     background-position-80px 0;   
  12. }  

Yöntemi daha önce anlattığımız gibi ardalan kaydırmaca yöntemidir. Hazırladığımız ardalan resminin ilk olarak istediğimiz kısmını gösteriyoruz. Fare imleci üzerine geldiğinde ise yatayda aynı eksende bulunan başlangıçta görünmeyen resmi eksi konum vererek gösteriyoruz.

Örnek sayfayı görmek için tıklayınız

 







http://KENDİ Tiklayinoyun komedi sohbet sitelerirehber.gen.trWebmasterim.Com
PageRank Checker netgazi.tr.gg

Bilgisayar ve İnternet İnternet-Tr Msn bot last visit powered by  Bots Visit Google bot last visit powered by Bots Visit Yahoo bot last visit powered by  Bots Visit


Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol